Changing sidebar code hook on WooCommerce product single pages

[[email protected]]

Hi there,

I want to change the current WooCommerce product single code structure from:

<div class="content-sidebar-wrap">
<main class="content"></div>
<aside class="sidebar"></aside>
</div>

To:

<div class="content-sidebar-wrap">
<main class="content">
<aside class="sidebar"></aside>
</div>
</div>

So basically putting the sidebar wrapper inside of the main content class. How can I achieve this?

[Brad Dalton]

Link to your site please.

---

Tutorials for StudioPress Themes & WooCommerce.

[[email protected]]

Sorry, the site is on on localhost only.

I'm using the genesis sample theme as the base for a custom child theme if that helps.

[Brad Dalton]

You could try the Genesis Connect for Woocommerce plugin which includes templates you can use in your child theme to modify the default markup and HTML output.

---

Tutorials for StudioPress Themes & WooCommerce.

[[email protected]]

Thanks for the help Brad. I had a dig around in Genesis Connect but couldn't find what I was looking for. I think I need to unhook the sidebar from where it is being loaded in archive-product.php then rehook it back into the main content div.

Unfortunately my knowledge on hooks and PHP is very limited so I am unsure how to go about this.

[Brad Dalton]

What a coincidence. I was just looking it again wondering why you want to do this?

You want this on desktops and mobile screens or just mobile?

---

Tutorials for StudioPress Themes & WooCommerce.

[Brad Dalton]

Maybe this :

remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
add_action( 'genesis_after_loop', 'genesis_do_sidebar' );

---

Tutorials for StudioPress Themes & WooCommerce.

[[email protected]]

Thank you so much Brad!

I am 99% of the way there now.

I am running a custom sidebar that only loads on WooCommerce category pages.

Here is the code from the functions.php:

// Register WooCommerce sidebar
genesis_register_sidebar( array(
    'id'            => 'woo_primary_sidebar',
    'name'          => __( 'WooCommerce Sidebar', 'themename' ),
    'description' => __( 'This is the WooCommerce webshop sidebar', 'themename' ),
) );

// Remove default sidebar, add shop sidebar
add_action( 'genesis_before', 'pp_add_woo_sidebar', 20 );
function pp_add_woo_sidebar() {

    if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
        if( is_woocommerce() ) {
            remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
            remove_action( 'genesis_sidebar_alt', 'genesis_do_sidebar_alt' );
            add_action( 'woocommerce_before_shop_loop', 'pp_woo_sidebar' );
        }
    }
    
}

// Display the WooCommerce sidebar
function pp_woo_sidebar() {
    if ( ! dynamic_sidebar( 'woo_primary_sidebar' ) && current_user_can( 'edit_theme_options' )  ) {
        genesis_after_entry( __( 'WooCommerce Primary Sidebar', 'genesis' ) );
    }
}

All that I need for it to work on the front end is to wrap all the widgets that are loaded in this sidebar inside of a div so I can control the placement via CSS.

However, I am unsure how to modify this code snippet to wrap all of the sidebar widgets inside of a div 🙁

[Brad Dalton]

You can add

echo '<div class="your-wrap">';

// Your Code

echo '</div>';

---

Tutorials for StudioPress Themes & WooCommerce.

[Author]

Posts