[Support request] Mellow template: making product archives look like the blog post archives

[Jan]

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?

[Jan]

Clarification: I’m using Mellow. Not trying to rip it off. Just creating a more consistent look than possible with the WooCommerce customizer.

[Tom]

Hi 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?

[Jan]

It’s a test, but visible at https://reprobruket.se/butik/

Thanks for having a look at it!

[David]

Hi 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.

[Jan]

But ain’t that just fabulous! You guys are the best! And this theme is really a gem!

[David]

Glad we could be of help

[Author]

Posts