[Resolved] widgets css help

Hi there,

Using the Sidebar/Content/Sidebar layout would be your only choice I think.

Problem is when i activate sidebar/content on sidebar layout in the prebuilt “1100px Content Container Width for Product Category Archive” hook of gp, then my whole page gets messed up… (in this hook i have set Content Width: 1269px)

What’s messed when you do that? Can you activate it so I can see?

Can you disable your caching plugin first so we can inspect the code properly?

Any chance you can temporarily comment out all your custom CSS?

And are you using a child theme? If so can you switch to a parent theme temprarily?

The source of code all showing up quite odd on your page.

Thank you.

The main issue here is there isn’t enough room for 4 columns in that little content area.

The overflow issue you’re seeing is fixed in GPP 1.10. However, even the fix (if you add the below CSS) won’t look good, as there isn’t enough room:

.woocommerce .wc-columns-container.wc-columns-4 .products, 
.wc-related-upsell-columns-4 .related ul.products, 
.wc-related-upsell-columns-4 .up-sells ul.products {
    grid-template-columns: repeat(4,minmax(0, 1fr));
}

Are you wanting to do something like our Niche site in the library?: https://gpsites.co/niche/shop/

If so, it uses our Off Canvas Panel set to: On

Then you need to add a new Hook Element with this content:

<span class="slideout-toggle woo-filter-toggle hide-on-mobile"><a href="#">FILTER</a></span>

Set the hook to: woocommerce_before_shop_loop

You’ll also need to check “Execute PHP”.

Then set the Display Rules to `Product Archive” and “Product Category Archive”.

Now you’ll need some CSS:

.woo-filter-toggle {
    padding: 10px 0;
    margin-right: 20px;
    float: left;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 20px;
}

.woo-filter-toggle a {
    color: #000;
}

.main-navigation ul li.slideout-toggle {
    display: none !important;
}

.woo-filter-toggle a:before {
    padding-right: 2px;
    position: relative;
    top: 1px;
}

Let me know 🙂