[Resolved] Align sidebar widgets with start products grid

[Bo]

I am trying to get my sidebar widgets aligned with the start of my product grid. Trouble is that the sidebar content and the product grid content are contained in totally different divs so I am not sure what I can do.

It is on this page, I would like to have black(ish) sidebar box at the same level as the first row of product images:
https://g625i1fva4-staging.onrocket.site/product-category/toej-og-udstyr/boernetoej-og-beskyttelse/boernetoej/

Any good ideas?

[David]

Hi there,

how would the Title and Breadcrumb be positioned ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Bo]

In my, vague, vision as they are now above the product grid.
If it would make it easier/possible, perhaps they could be centered over both the sidebar and product grid…

[David]

Hmmm…. i don’t think my brain is working properly today as this seems a little overkill, but it is woocommerce, so:

1. Add this PHP Snippet to:

add_action('wp', function(){
    if ( is_woocommerce() && !is_product() ) {

        remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
        remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
        remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );

        add_action( 'generate_inside_container', function(){
            echo '<div class="grid-container woo_archive_header">';
        },4 );
        add_action( 'generate_inside_container', function(){
            echo '</div>';
        },10 );
        add_action( 'generate_inside_container', 'woocommerce_breadcrumb', 5 );
        add_action( 'generate_inside_container', 'woocommerce_taxonomy_archive_description', 5 );
        add_action( 'generate_inside_container', 'woocommerce_product_archive_description', 5 );
    }
});

This will unhook and rehook the breadcrumb and archive description above the content.

Then some CSS to make sure it occupies its own row:

.woo_archive_header {
    width: 100%;
}
.woocommerce.archive .site-content {
    flex-wrap: wrap;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Bo]

Thank you for the suggestion. It got me thinking, and I manage to sneak in a fake side-bar div in the woocommerce_before_shop_loop hook. Then I could arrange it along with the products and ordering via css and accomplish what I was after 🙂

[David]

Awesome – glad to hear you got a working solution 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts