- This topic has 6 replies, 3 voices, and was last updated 4 years, 7 months ago by David.
Viewing 7 posts - 1 through 7 (of 7 total)
-
AuthorPosts
-
September 17, 2019 at 11:08 am #1011867Jan
The responsive two-column layout in Mellow is so nice. I’d like to make WooCommerce shop archives to look exactly like that. Is that possible?
September 17, 2019 at 12:30 pm #1011923JanClarification: I’m using Mellow. Not trying to rip it off. Just creating a more consistent look than possible with the WooCommerce customizer.
September 17, 2019 at 8:21 pm #1012171TomLead DeveloperLead DeveloperHi there,
It’s possible, but will likely require a lot of custom CSS.
Is the shop page active on your site right now? If so, where can I find it?
September 18, 2019 at 12:02 am #1012226JanIt’s a test, but visible at https://reprobruket.se/butik/
Thanks for having a look at it!
September 18, 2019 at 8:35 am #1012719DavidStaffCustomer SupportHi there,
try this CSS:
.archive.woocommerce .inside-article { background-color: transparent; padding: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .archive.woocommerce .inside-article .entry-content { max-width: 100%; } #wc-column-container .product { padding: 70px; background-color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.04); -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.04); box-shadow: 0 0 30px rgba(0, 0, 0, 0.04); -webkit-transition: -webkit-box-shadow 500ms ease; transition: -webkit-box-shadow 500ms ease; -o-transition: box-shadow 500ms ease; -moz-transition: box-shadow 500ms ease, -moz-box-shadow 500ms ease; transition: box-shadow 500ms ease; transition: box-shadow 500ms ease, -webkit-box-shadow 500ms ease, -moz-box-shadow 500ms ease; } #wc-column-container .product:hover { -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .woocommerce ul.products li.product .woocommerce-LoopProduct-link h2 { -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; margin-bottom: 2em !important; } .wc-product-image { margin-left: -70px; margin-right: -70px; margin-bottom: 2em; } .inside-wc-product-image, .wc-product-image img { width: 100% !important; -o-object-fit: cover; object-fit: cover; } .archive.woocommerce .woocommerce-breadcrumb, .archive.woocommerce .woocommerce-breadcrumb a { color: #fff !important; }
You can style the Product title in Customizer > Typograhy / Color > Woocommerce.
September 18, 2019 at 12:50 pm #1012976JanBut ain’t that just fabulous! You guys are the best! And this theme is really a gem!
September 18, 2019 at 5:09 pm #1013106DavidStaffCustomer SupportGlad we could be of help
-
AuthorPosts
Viewing 7 posts - 1 through 7 (of 7 total)
- You must be logged in to reply to this topic.