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.