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
    • Design Lord, Child of Thor

    Thanks everyone for the rep points :slight_smile:

    BTW, I'd love to see how these snippets helped improve the overall design of your marketpress site. So, it would be nice if you can share with us your website url, and see how you implemented these snippets into your site.

  • Nathan Onn
    • Design Lord, Child of Thor

    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
    • Support Gorilla

    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
      • Site Builder, Child of Zeus

      Thank you Adam,

      So I do have to go to each site and update manually. With close to 100 stores, this could take a while. Also to display the "related product listings" as grid view and four in a row, I will have to do manually. Do you know code to add to child theme, so I don't have to do manually. Could take many hours?

      regards,
      Lisa

  • Adam Czajczyk
    • Support Gorilla

    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
    • Design Lord, Child of Thor

    @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
    • Site Builder, Child of Zeus

    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
    • Site Builder, Child of Zeus

    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

    • Myles
      • Design Lord, Child of Thor

      This is solved. When trying option 2 I could not get it to work. All other options worked however, so I am using option #5. Look just as good. Thanks.

      I do find that the h3 title have ridiculously large line hight though. Not a big issue.

  • donrich
    • Site Builder, Child of Zeus

    @Nathan Onn
    please how do i get more snippet to make my gridmarket look supper cool and how do i apply short code to make my theme rich, please link me to any article or video that will help me on how to apply shortcodes.thanks

  • Nathan Onn
    • Design Lord, Child of Thor

    @donrich

    Those snippets I posted above will only work on the default product grid from MarketPress (v3 and above). I don't think it would work on GridMarket. Also, is GridMarket compatible with the latest version of MarketPress?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.