Genesis Connect For WooCommerce Shop Page Styling Error

[buddy_boy8403]

I'm using:

WordPress Version 3.9.1
Genesis Version 2.0.2
Enterprise Pro Child Theme Version 2.0.0
Genesis Connect For WooCommerce Version 0.9.7

Website's shop page is: http://dj2nite.com/shop/

The styling is off on this page only, and it appears that Genesis Connect is missing the styling for the:

main#main-content.content

The product pages appear to be styled correctly with borders, background color and padding:

http://dj2nite.com/product/pyle-padh182-1400-w-dual-18-8-way-stage-speaker-cabinet/

How can I get the shop page styling to look like the product page styling?

http://dj2nite.com/shop/

[Tony @ AlphaBlossom]

I haven't really used the Genesis Connect plugin, so
not sure if this will work...as always, make sure you back your site up before making changes.

The problem is not with the main#main-content.content, but the single product page is wrapped in an .entry div. The shop page doesn't have that, so you don't get that border inside.

Try adding this to your theme's functions.php file:

// Add wrap to WooCommerce Shop/Category Archive pages to style consistently with Single Product Page
function abte_genesis_shop_page_wrapper_open() {
    
    echo '<div class="shop-page-wrap">';
    
}

function abte_genesis_shop_page_wrapper_close() {
    
    echo '</div><!-- end .shop-page-wrap -->';
    
}

add_action('get_header','abte_genesis_add_shop_page_wrapper');
function abte_genesis_add_shop_page_wrapper() {

    if ( is_shop() || is_product_category() ) { 

        add_action( 'genesis_before_loop', 'abte_genesis_shop_page_wrapper_open', 10 );
        add_action( 'genesis_after_loop', 'abte_genesis_shop_page_wrapper_close', 10 );

    }  

}
 

Then on your theme's style.css file, add .shop-page-wrap to your .entry rule:

.entry,
.shop-page-wrap {
    background-color: #FFFFFF;
    border: 1px solid #ECECEC;
    box-shadow: 0 1px #ECECEC;
    margin-bottom: 4rem;
    padding: 4rem;
}

Again, not sure if this works with Genesis Connect, but I tested on my site without Genesis Connect and works great.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts