MarketPress grid layout snippets

Hey everyone,

Just want to share with you 3 CSS styling that would transform the default product grid into something amazing.

Style 1:

.mp_products-grid .mp_product {
  position: relative;
  overflow: hidden; }
  .mp_products-grid .mp_product .mp_product_img_link:before {
    display: none; }
  .mp_products-grid .mp_product .mp_product_img_link:after {
    display: none; }
  .mp_products-grid .mp_product .mp_product_img_link img {
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    display: block; }
  .mp_products-grid .mp_product .mp_product_name {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha)";
    filter: alpha(opacity=0);
    opacity: 0;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    /* For Safari 3.1 to 6.0 */
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s;
    margin-bottom: 0; }
    .mp_products-grid .mp_product .mp_product_name a {
      color: #e1e1e1;
      text-decoration: none;
      -moz-transition-property: all;
      -webkit-transition-property: all;
      /* For Safari 3.1 to 6.0 */
      -o-transition-property: all;
      -ms-transition-property: all;
      transition-property: all;
      -moz-transition-duration: 0.3s;
      -webkit-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
      -ms-transition-duration: 0.3s;
      transition-duration: 0.3s;
      font-size: 16px;
      line-height: 1.25;
      font-weight: 700; }
      .mp_products-grid .mp_product .mp_product_name a:hover {
        color: #fafafa; }
  .mp_products-grid .mp_product .mp_product_price {
    font-size: 16px;
    color: #fff;
    background: #3F4041;
    display: inline-block;
    padding: 5px 15px;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    /* For Safari 3.1 to 6.0 */
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s; }
  .mp_products-grid .mp_product.mp_on_sale .mp_product_price {
    padding: 5px 25px; }
  .mp_products-grid .mp_product .mp_product_callout {
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
    transition: 0.35s all ease-in-out 0.1s; }
  .mp_products-grid .mp_product.mp_product-has-image .mp_product_details {
    margin-top: 0px; }
  .mp_products-grid .mp_product .mp_product_price-sale ~ .mp_product_price-normal {
    color: #db695d; }
  .mp_products-grid .mp_product a.mp_button,
  .mp_products-grid .mp_product button.mp_button {
    display: inline-block;
    width: auto;
    color: #fafafa;
    border-color: #fafafa;
    background: none; }
    .mp_products-grid .mp_product a.mp_button:hover, .mp_products-grid .mp_product a.mp_button:focus,
    .mp_products-grid .mp_product button.mp_button:hover,
    .mp_products-grid .mp_product button.mp_button:focus {
      background: #fafafa;
      color: #444; }
  .mp_products-grid .mp_product .mp_ajax_loader {
    color: #fafafa; }
  .mp_products-grid .mp_product .mp_product_details {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    max-height: 60%;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    /* For Safari 3.1 to 6.0 */
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s;
    text-align: center; }
  .mp_products-grid .mp_product .mp_product_meta {
    margin-top: 20px; }
  .mp_products-grid .mp_product.mp_product-has-image .mp_product_details {
    margin-top: 0; }
  .mp_products-grid .mp_product:hover .mp_product_details {
    max-height: 100%;
    background: rgba(0, 0, 0, 0.65); }
  .mp_products-grid .mp_product:hover .mp_product_price {
    background: none; }
  .mp_products-grid .mp_product:hover .mp_product_name,
  .mp_products-grid .mp_product:hover .mp_product_callout {
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  @media (max-width: 991px) {
    .mp_products-grid .mp_product .mp_product_name,
    .mp_products-grid .mp_product .mp_product_callout {
      display: block;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha)";
      filter: alpha(opacity=100);
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); }
    .mp_products-grid .mp_product .mp_product_details {
      position: relative;
      max-height: auto; }
    .mp_products-grid .mp_product .mp_product_name a {
      color: #444; }
      .mp_products-grid .mp_product .mp_product_name a:hover {
        color: #666; }
    .mp_products-grid .mp_product .mp_product_price {
      color: #444;
      background: none; }
    .mp_products-grid .mp_product .mp_product_price-sale ~ .mp_product_price-normal {
      color: #db695d; }
    .mp_products-grid .mp_product a.mp_button,
    .mp_products-grid .mp_product button.mp_button {
      color: #444;
      border-color: #444;
      background: none; }
      .mp_products-grid .mp_product a.mp_button:hover, .mp_products-grid .mp_product a.mp_button:focus,
      .mp_products-grid .mp_product button.mp_button:hover,
      .mp_products-grid .mp_product button.mp_button:focus {
        background: #444;
        color: #fafafa; }
    .mp_products-grid .mp_product .mp_ajax_loader {
      color: #444; }
    .mp_products-grid .mp_product:hover .mp_product_details {
      background: none; } }

Style 2:

.mp_products-grid .mp_product {
  overflow: hidden;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12); }
  .mp_products-grid .mp_product .mp_product_img_link:after {
    display: none; }
  .mp_products-grid .mp_product .mp_product_img_link img {
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    display: block; }
  .mp_products-grid .mp_product .mp_product_name {
    -moz-transition-property: all;
    -webkit-transition-property: all;
    /* For Safari 3.1 to 6.0 */
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s;
    margin-bottom: 0; }
    .mp_products-grid .mp_product .mp_product_name a {
      text-decoration: none;
      -moz-transition-property: all;
      -webkit-transition-property: all;
      /* For Safari 3.1 to 6.0 */
      -o-transition-property: all;
      -ms-transition-property: all;
      transition-property: all;
      -moz-transition-duration: 0.3s;
      -webkit-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
      -ms-transition-duration: 0.3s;
      transition-duration: 0.3s;
      font-size: 16px;
      line-height: 1.25;
      font-weight: 700; }
  .mp_products-grid .mp_product .mp_product_price {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 300;
    display: inline-block;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    /* For Safari 3.1 to 6.0 */
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s;
    vertical-align: middle; }
  .mp_products-grid .mp_product .mp_product_callout {
    position: absolute;
    z-index: 5;
    bottom: 115%;
    left: 0;
    width: 100%;
    text-align: center;
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
    transition: 0.35s all ease-in-out 0.1s; }
  .mp_products-grid .mp_product a.mp_button,
  .mp_products-grid .mp_product button.mp_button {
    display: inline-block;
    width: auto;
    color: #fafafa;
    border: none;
    background: #3498db;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px; }
    .mp_products-grid .mp_product a.mp_button:hover, .mp_products-grid .mp_product a.mp_button:focus,
    .mp_products-grid .mp_product button.mp_button:hover,
    .mp_products-grid .mp_product button.mp_button:focus {
      background: #fafafa;
      color: #1d6fa5; }
  .mp_products-grid .mp_product .mp_ajax_loader {
    display: inline-block;
    padding: 10px 15px;
    background: rgba(52, 152, 219, 0.85);
    color: #fafafa; }
  .mp_products-grid .mp_product .mp_product_details {
    position: relative;
    margin-top: 0;
    background: #f1f1f1;
    padding-bottom: 15px; }
  .mp_products-grid .mp_product .mp_product_meta {
    margin-bottom: 0; }
  .mp_products-grid .mp_product .mp_product_price-sale {
    display: inline-block; }
  .mp_products-grid .mp_product .mp_product_price-sale ~ .mp_product_price-normal {
    display: inline-block;
    margin-left: 8px;
    font-size: 14px;
    line-height: 16px; }
  .mp_products-grid .mp_product:hover .mp_product_img_link:before {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha)";
    filter: alpha(opacity=65);
    opacity: 0.65; }
  .mp_products-grid .mp_product:hover .mp_product_callout {
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  @media (max-width: 991px) {
    .mp_products-grid .mp_product .mp_product_callout {
      position: relative;
      display: block;
      padding-top: 15px;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha)";
      filter: alpha(opacity=100);
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); } }

Style 3:

.mp_products-grid .mp_product {
  position: relative;
  overflow: hidden; }
  .mp_products-grid .mp_product .mp_product_img_link:before {
    display: none; }
  .mp_products-grid .mp_product .mp_product_img_link:after {
    display: none; }
  .mp_products-grid .mp_product .mp_product_img_link img {
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    display: block; }
  .mp_products-grid .mp_product .mp_product_name {
    -moz-transition-property: all;
    -webkit-transition-property: all;
    /* For Safari 3.1 to 6.0 */
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s;
    margin-bottom: 0; }
    .mp_products-grid .mp_product .mp_product_name a {
      color: #e1e1e1;
      text-decoration: none;
      -moz-transition-property: all;
      -webkit-transition-property: all;
      /* For Safari 3.1 to 6.0 */
      -o-transition-property: all;
      -ms-transition-property: all;
      transition-property: all;
      -moz-transition-duration: 0.3s;
      -webkit-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
      -ms-transition-duration: 0.3s;
      transition-duration: 0.3s;
      font-size: 16px;
      line-height: 1.25;
      font-weight: 700; }
      .mp_products-grid .mp_product .mp_product_name a:hover {
        color: #fafafa; }
  .mp_products-grid .mp_product .mp_product_callout {
    display: block;
    padding: 0 15px 15px 15px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
    transition: 0.35s all ease-in-out 0.1s; }
  .mp_products-grid .mp_product .mp_product_price {
    font-size: 14px;
    color: #fff;
    display: inline-block;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    /* For Safari 3.1 to 6.0 */
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s;
    margin-bottom: 0; }
  .mp_products-grid .mp_product .mp_product_price-sale {
    display: inline-block; }
  .mp_products-grid .mp_product .mp_product_price-sale ~ .mp_product_price-normal {
    color: #db695d;
    display: inline-block;
    margin-left: 8px;
    font-size: 14px;
    line-height: 16px; }
  .mp_products-grid .mp_product a.mp_button,
  .mp_products-grid .mp_product button.mp_button {
    display: inline-block;
    width: auto;
    color: #fafafa;
    border-color: #fafafa;
    background: none; }
    .mp_products-grid .mp_product a.mp_button:hover, .mp_products-grid .mp_product a.mp_button:focus,
    .mp_products-grid .mp_product button.mp_button:hover,
    .mp_products-grid .mp_product button.mp_button:focus {
      background: #fafafa;
      color: #444; }
  .mp_products-grid .mp_product .mp_ajax_loader {
    padding: 5px 25px;
    color: #fafafa; }
  .mp_products-grid .mp_product .mp_product_details {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 40%;
    z-index: 2;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    /* For Safari 3.1 to 6.0 */
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s;
    background: rgba(0, 0, 0, 0.75);
    text-align: left; }
  .mp_products-grid .mp_product .mp_product_meta {
    margin: 0 15px 15px 15px; }
  .mp_products-grid .mp_product.mp_product-has-image .mp_product_details {
    margin-top: 0; }
  .mp_products-grid .mp_product:hover .mp_product_details {
    max-height: 100%;
    height: auto; }
  .mp_products-grid .mp_product:hover .mp_product_callout {
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  @media (max-width: 991px) {
    .mp_products-grid .mp_product .mp_product_details {
      max-height: 100%;
      height: auto; }
    .mp_products-grid .mp_product .mp_product_callout {
      display: block;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha)";
      filter: alpha(opacity=100);
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); } }

Requirements:
You must have the latest version of MarketPress (sorry, these snippets won't work on MarketPress v2 and below).

How to use / Where to add these CSS?
I would suggest you to use this plugin: https://wordpress.org/plugins/simple-custom-css/. It's simple and easy to use.

Remember you can only use one snippets at a time.Please don't copy paste all these snippets into your site - it would make your product grid looks really weird.

Hope you like it!

If you want to share your own snippets, feel free to post it down below.

If you've any questions, just drop your questions below. Or if you want to talk to me privately, you can reach me via the contact form here: http://www.marketpressthemes.com/contact/

Regards, Nathan

P.S. From time to time, I'll be sharing more snippets here - so make sure you subscribed to this post to keep yourself updated.

  • Nathan Onn

    2 More css snippets:

    Style 4:

    .mp_products-grid .mp_product {
      position: relative;
      -moz-transition-property: all;
      -webkit-transition-property: all;
      /* For Safari 3.1 to 6.0 */
      -o-transition-property: all;
      -ms-transition-property: all;
      transition-property: all;
      -moz-transition-duration: 0.3s;
      -webkit-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
      -ms-transition-duration: 0.3s;
      transition-duration: 0.3s; }
      .mp_products-grid .mp_product .mp_product_img_link img {
        border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        display: block; }
      .mp_products-grid .mp_product .mp_product_name {
        -moz-transition-property: all;
        -webkit-transition-property: all;
        /* For Safari 3.1 to 6.0 */
        -o-transition-property: all;
        -ms-transition-property: all;
        transition-property: all;
        -moz-transition-duration: 0.3s;
        -webkit-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        -ms-transition-duration: 0.3s;
        transition-duration: 0.3s;
        margin-bottom: 0; }
        .mp_products-grid .mp_product .mp_product_name a {
          color: #444;
          text-decoration: none;
          -moz-transition-property: all;
          -webkit-transition-property: all;
          /* For Safari 3.1 to 6.0 */
          -o-transition-property: all;
          -ms-transition-property: all;
          transition-property: all;
          -moz-transition-duration: 0.3s;
          -webkit-transition-duration: 0.3s;
          -o-transition-duration: 0.3s;
          -ms-transition-duration: 0.3s;
          transition-duration: 0.3s;
          font-size: 16px;
          line-height: 1.25;
          font-weight: 700; }
          .mp_products-grid .mp_product .mp_product_name a:hover {
            color: #5e5e5e; }
      .mp_products-grid .mp_product .mp_product_price {
        font-size: 14px;
        color: #444;
        display: inline-block;
        -moz-transition-property: all;
        -webkit-transition-property: all;
        /* For Safari 3.1 to 6.0 */
        -o-transition-property: all;
        -ms-transition-property: all;
        transition-property: all;
        -moz-transition-duration: 0.3s;
        -webkit-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        -ms-transition-duration: 0.3s;
        transition-duration: 0.3s;
        margin-bottom: 0; }
      .mp_products-grid .mp_product .mp_product_price-sale {
        display: inline-block; }
      .mp_products-grid .mp_product .mp_product_price-sale ~ .mp_product_price-normal {
        color: #db695d;
        display: inline-block;
        margin-left: 8px;
        font-size: 14px;
        line-height: 16px; }
      .mp_products-grid .mp_product .mp_product_details {
        -moz-transition-property: all;
        -webkit-transition-property: all;
        /* For Safari 3.1 to 6.0 */
        -o-transition-property: all;
        -ms-transition-property: all;
        transition-property: all;
        -moz-transition-duration: 0.3s;
        -webkit-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        -ms-transition-duration: 0.3s;
        transition-duration: 0.3s; }
      .mp_products-grid .mp_product.mp_product-has-image .mp_product_details {
        margin-top: 0px; }
      .mp_products-grid .mp_product .mp_product_callout {
        display: none;
        padding-bottom: 15px; }
      .mp_products-grid .mp_product a.mp_button,
      .mp_products-grid .mp_product button.mp_button {
        display: inline-block;
        width: auto;
        font-size: 12px;
        color: #444;
        border-color: #444;
        background: none;
        padding: 10px 25px;
        border-radius: 25px;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px; }
        .mp_products-grid .mp_product a.mp_button:hover, .mp_products-grid .mp_product a.mp_button:focus,
        .mp_products-grid .mp_product button.mp_button:hover,
        .mp_products-grid .mp_product button.mp_button:focus {
          background: #444;
          color: #fafafa; }
      .mp_products-grid .mp_product .mp_ajax_loader {
        font-size: 12px; }
      .mp_products-grid .mp_product:hover {
        -webkit-box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.24), 0px 17px 50px 0px rgba(0, 0, 0, 0.19);
        box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.24), 0px 17px 50px 0px rgba(0, 0, 0, 0.19); }
        .mp_products-grid .mp_product:hover .mp_product_details {
          -webkit-box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.24), 0px 17px 50px 0px rgba(0, 0, 0, 0.19);
          box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.24), 0px 17px 50px 0px rgba(0, 0, 0, 0.19);
          background: #e5e5e5;
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          z-index: 3; }
        .mp_products-grid .mp_product:hover .mp_product_callout {
          display: block; }
      @media (max-width: 991px) {
        .mp_products-grid .mp_product .mp_product_callout {
          display: block; }
        .mp_products-grid .mp_product:hover .mp_product_details {
          position: relative; } }

    Style 5:

    .mp_products-grid .mp_product {
      position: relative;
      border: 2px solid #444;
      -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
      -moz-transition-property: all;
      -webkit-transition-property: all;
      /* For Safari 3.1 to 6.0 */
      -o-transition-property: all;
      -ms-transition-property: all;
      transition-property: all;
      -moz-transition-duration: 0.3s;
      -webkit-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
      -ms-transition-duration: 0.3s;
      transition-duration: 0.3s; }
      .mp_products-grid .mp_product .mp_product_img_link img {
        border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        display: block; }
      .mp_products-grid .mp_product .mp_product_name {
        -moz-transition-property: all;
        -webkit-transition-property: all;
        /* For Safari 3.1 to 6.0 */
        -o-transition-property: all;
        -ms-transition-property: all;
        transition-property: all;
        -moz-transition-duration: 0.3s;
        -webkit-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        -ms-transition-duration: 0.3s;
        transition-duration: 0.3s;
        margin-bottom: 0; }
        .mp_products-grid .mp_product .mp_product_name a {
          color: #444;
          text-decoration: none;
          -moz-transition-property: all;
          -webkit-transition-property: all;
          /* For Safari 3.1 to 6.0 */
          -o-transition-property: all;
          -ms-transition-property: all;
          transition-property: all;
          -moz-transition-duration: 0.3s;
          -webkit-transition-duration: 0.3s;
          -o-transition-duration: 0.3s;
          -ms-transition-duration: 0.3s;
          transition-duration: 0.3s;
          font-size: 16px;
          line-height: 1.25;
          font-weight: 700; }
          .mp_products-grid .mp_product .mp_product_name a:hover {
            color: #5e5e5e; }
      .mp_products-grid .mp_product .mp_product_meta {
        position: static; }
      .mp_products-grid .mp_product .mp_product_price {
        font-size: 14px;
        color: #444;
        display: inline-block;
        -moz-transition-property: all;
        -webkit-transition-property: all;
        /* For Safari 3.1 to 6.0 */
        -o-transition-property: all;
        -ms-transition-property: all;
        transition-property: all;
        -moz-transition-duration: 0.3s;
        -webkit-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        -ms-transition-duration: 0.3s;
        transition-duration: 0.3s;
        margin-bottom: 0;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
        background: #fafafa;
        padding: 5px 12px;
        border-left: 2px solid #444;
        border-bottom: 2px solid #444;
        font-weight: 300; }
      .mp_products-grid .mp_product .mp_product_price-sale {
        display: inline-block; }
      .mp_products-grid .mp_product .mp_product_price-sale ~ .mp_product_price-normal {
        color: #999;
        display: inline-block;
        margin-left: 8px;
        font-size: 14px;
        line-height: 16px; }
      .mp_products-grid .mp_product .mp_product_callout {
        padding-bottom: 15px; }
      .mp_products-grid .mp_product .mp_ajax_loader {
        font-size: 12px; }
      .mp_products-grid .mp_product a.mp_button,
      .mp_products-grid .mp_product button.mp_button {
        display: inline-block;
        width: auto;
        font-size: 12px;
        color: #fafafa;
        border-color: #444;
        background: #444;
        padding: 10px 15px; }
        .mp_products-grid .mp_product a.mp_button:hover, .mp_products-grid .mp_product a.mp_button:focus,
        .mp_products-grid .mp_product button.mp_button:hover,
        .mp_products-grid .mp_product button.mp_button:focus {
          background: none;
          color: #444; }
      .mp_products-grid .mp_product:hover {
        -webkit-box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.24), 0px 17px 50px 0px rgba(0, 0, 0, 0.19);
        box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.24), 0px 17px 50px 0px rgba(0, 0, 0, 0.19); }

    That's all for now. Hope you like it.

  • Adam Czajczyk

    Hello Lisa,

    I hope you're well today!

    The default number of products for MarketPress in grid view is 3 but you can easily change it to 1,2 or 4 simply by going to your dashboard's

    "Store Settings" -> "Presentation" page.

    Find a "Product List/Grid Settings" section and select e.g. "Four" as an option for "How many products per row?" setting. Style will automatically adjust itself resulting in a nice "4-in-a-row" product display. I tested this on my own setup and can confirm this.

    I hope that helps!

    Best regards,
    Adam

  • LisaAllen

    Thank you! That was simple.

    For this one http://www.minichemarkets.com.au/sewninthecupboard/
    It is still not aligned? Do you know how to change the text to be smaller.

    There is quite a large amount of white grid underneath the image?

    This one here, looks perfect but no images. I know it definitely had images previously.

    http://www.minichemarkets.com.au/aliphia/

    Kind regards,
    Lisa

  • Adam Czajczyk

    Hey Lisa!

    I'm glad I could partially help. However, I'm not sure what do you mean by "it is still not aligned" as described here:

    For this one http://www.minichemarkets.com.au/sewninthecupboard/
    It is still not aligned?

    Could you elaborate a bit on this?

    I also have this huge problem.

    http://www.minichemarkets.com.au/sewninthecupboard/product/vehicles-cushion-in-red/

    The description goes around the product image as such and not separate from the MP Product Gallery, it also stretches the images? Please help if you can. Have over 90 stores and have been waiting to go live for 2 years.

    It would be really great if you could start a separate thread of your own on your support forum regarding this issue as it doesn't seem to be related to Nathan's CSS code at all. That way we'd be able to respond quicker and we won't miss anything. It may also turn out to be helpful for other members of our community that would face similar issues. Thanks for understanding!

    Best regards,
    Adam

  • Nathan Onn

    @Adam Czajczyk

    I believe Lisa is talking about the differences in image size for each products. Hence, making the grid not align.

    @LisaAllen

    There are few ways to fixed the image issue:

    1. Make sure the images you've uploaded isn't too small. Ideally, The image size should be around 600px.

    2. Next, use this plugin: https://wordpress.org/plugins/regenerate-thumbnails/ to regenerate all your images.

    3. If step #1 and #2 didn't work, then you'll need to resize all your images to a same fixed size, and reupload it again.

  • LisaAllen

    Hope you are well,

    So sorry, I am in abit of a fickle.

    The Styles look amazing. However my issue is that I need to upgrade to new version of Marketpress and Wordpress and this of course conflicted with MP TT Front End Admin. So have been asking developer of new version with no luck.

    As I love the look and feel of the above, do you have a version of code that is compatible with old version of marketpress. Or this code can be edited for old version? I know a weird question, but trying to launch.

    If not do you know if Marketpress have a recent admin front end plugin, allowing uploading of products.

    Lisa

  • LisaAllen

    Thank you.

    I am looking at having MP FrontEnd updated. As I don't know of any other plugin that will do the same. I may have to migrate over to woo commerce eventually. I am sure there are many, many others having the same problem now.

    Spoke to developer eventually and they no longer support MP TT Front End Admin plugin, so I am sure many people will be quite frustrated with this. Eventually marketpress without a front end admin plugin, will be phased out. As that is the whole point of the etsy type site. To allow front end uploading of products.

    http://www.minichemarkets.com.au/nikujo/

    Can I ask with the above, some images are not showing? Some featured images are not showing at all?

    Please help if you can.

    Kind Regards,
    Lisa

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.