Hi,
I want to change the way the products are displayed on the site. Followed the below link to change it to masonry style but there is no change is the layout of the product display. Am I missing something.
Is there any other way to make the shop, product and category appear page more stylish through the theme?
Thank you
Hello @Mang,
Thanks for writing in!
With a little CSS, you can style the shop, product, and archive pages. Take for example Crafty demo site here: https://demo.theme.co/crafty/shop/
If you apply the same custom CSS from the crafty theme, your shop index would look like this:
And this is the custom CSS used in the Crafty site demo:
/* Shared Content: Blog,
// WooCommerce, and Recent
// Posts
// ------------------------ */
.entry-product,
.has-post-thumbnail .entry-featured,
.blog .x-main.full > article,
body .x-recent-posts a {
border: 0 !important;
box-shadow: none;
}
.entry-product,
.blog .x-main.full > article,
body .x-recent-posts a {
transition-duration: 0.3s;
transition-property: box-shadow;
transition-timing-function: ease-in-out;
}
.entry-product:hover,
.blog .x-main.full > article:not(:first-child):hover,
body .x-recent-posts a:hover {
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
0 12.5px 10px rgba(0, 0, 0, 0.035),
0 22.3px 17.9px rgba(0, 0, 0, 0.042),
0 41.8px 33.4px rgba(0, 0, 0, 0.05),
0 100px 80px rgba(0, 0, 0, 0.07);
}
.woocommerce li.product .entry-header,
.blog .x-main.full > article:not(:first-child) .entry-wrap,
div.x-recent-posts .x-recent-posts-content {
padding: 1.5625em 1.95em;
}
.blog .x-main.full > article:not(:first-child) .entry-wrap .entry-title,
div.x-recent-posts .x-recent-posts-content .h-recent-posts {
margin: 0;
font-size: 1.25rem;
font-weight: 400;
letter-spacing: 0px;
line-height: 1.75;
white-space: normal;
color: #000000;
}
.blog .x-main.full > article:not(:first-child) .entry-wrap .entry-title a,
div.x-recent-posts .x-recent-posts-content .h-recent-posts {
color: #000000;
}
/* WooCommerce
// ------------------------ */
.woocommerce li.product {
box-shadow: none;
overflow: visible;
}
.woocommerce li.product .onsale {
top: 6px;
left: 6px;
width: 4em;
height: 2.5em;
border-radius: 0px;
line-height: 2.5em;
text-shadow: none;
box-shadow: none;
transform: rotate(0deg);
pointer-events: none;
}
.woocommerce .entry-wrap {
padding: 45px 0 0;
}
.woocommerce li.product .entry-wrap {
padding: 0;
box-shadow: none;
}
.woocommerce li.product .entry-header h3 {
font-size: 1.25rem;
letter-spacing: 0.005em;
line-height: 1.2;
}
.woocommerce .price {
font-size: 1.25rem;
letter-spacing: 0.005em;
}
.woocommerce li.product .entry-header .price > .amount,
.woocommerce li.product .entry-header .price > ins > .amount {
font-size: 1em;
line-height: 1;
color: currentColor;
}
.quantity input[type="number"] {
border-color: black;
}
.woocommerce-tabs .x-tab-content .x-tab-pane {
padding-left: 0;
padding-top: 0;
}
.woocommerce .quantity input[type="number"] {
font-size: 16px;
}
.single_add_to_cart_button,
.checkout-button,
.apply_coupon,
.update_cart {
padding: 0.7em 1.125em;
}
.woocommerce .cart .actions > input,
.woocommerce .cart .actions > button {
padding: 0.7em 1.125em;
}
.woocommerce-cart-form,
.woocommerce-cart-form a,
.woocommerce label,
.woocommerce table th,
.woocommerce table td,
.woocommerce .cart_totals,
.woocommerce-order-overview li {
color: rgba(0, 0, 0, 0.8);
}
.woocommerce-cart-form table th {
padding: 3em 0.652em 3em 0;
}
.cart_totals table td,
.cart_totals table th {
padding: 1em 1em 1em 0;
}
#order_review table td,
#order_review table th {
padding: 1em 1em 1em 0;
}
.woocommerce-order-details {
padding: 3em 0em
}
.woocommerce-order-details table td,
.woocommerce-order-details table th {
padding: 1em 1em 1em 0;
}
.woocommerce-cart-form td {
padding: 1em 0em;
}
.woocommerce thead {
text-transform: uppercase;
}
.widget_shopping_cart_content .x-interactive {
background: none !important;
border-color: #ebebe7 !important;
box-shadow: none !important;
}
.woocommerce-checkout form .payment_methods label {
padding: 0;
}
.woocommerce th {
font-weight: normal;
}
.woocommerce table td,
.woocommerce table tr {
border-color: #ebebe7;
}
.woocommerce-result-count,
.woocommerce-ordering {
opacity: 0;
}
.woocommerce li.product {
margin-bottom: 8.5%;
}
li.woocommerce-MyAccount-navigation-link a {
padding: 0.9em 1em;
font-size: 14px;
}
input#rememberme {
margin-right: 0.5em;
}
.woocommerce-form-login__rememberme {
padding: 0 0 1em 0;
}
.woocommerce .upsells ul.products li.product,
.woocommerce .related ul.products li.product,
.woocommerce .cross-sells ul.products li.product {
box-shadow: none;
border-radius: 0;
border: none;
}
.e85-6.x-anchor-toggle .x-graphic-icon[class*="active"] {
color: #272727;
}
.e85-6.x-anchor-toggle {
border-radius: 0;
}
.x-masthead .crafty-cart .x-anchor-text {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0.1rem;
top: -0.1rem;
font-weight: normal;
font-size: 13px;
background-color: #777;
color: #fff;
border-radius: 50%;
min-width: 1.2em;
height: 1.2em;
}
.x-masthead .crafty-cart .x-anchor-text span {
font-size: 10px;
color: #FFF !important;
}
.woocommerce .cart .actions .coupon {
padding-top: 4em;
}
Hope this helps.
Thank you Reunel.
How about the masonary style? Is that possible on the Shop index and categories?
I changed the settings as suggested in the above thread, also by you 
Didn’t see the change.
Appreciate all the support.
Thanks
Hello @Mang,
Regretfully, there is no such option available to make the Shop page in masonry layout. What you are expecting would required customization which is beyond the scope of theme support. I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.