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

Home Forums Support Mellow template: making product archives look like the blog post archives

  • This topic has 6 replies, 3 voices, and was last updated 1 year ago by David.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1011867
    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?

    #1011923
    Jan

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

    #1012171
    Tom
    Lead Developer
    Lead Developer

    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?

    #1012226
    Jan

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

    Thanks for having a look at it!

    #1012719
    David
    Staff
    Customer Support

    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.

    #1012976
    Jan

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

    #1013106
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.