Genesis WooCommerce: How to Make Your Shop Page Full Width (For Maximum Impact)
Introduction:
Are you using the powerful Genesis Framework with WooCommerce to build your online store? Want to give your products more breathing room and create a visually stunning shopping experience? Making your WooCommerce shop page full width can dramatically improve its appeal and usability. This article will guide you through the steps to achieve a full-width shop page layout on your Genesis-powered WooCommerce website. We’ll explore different methods, from code snippets to plugins, ensuring you find the solution that best suits your skills and needs. By the end, you’ll have a beautiful, immersive shop page that highlights your products and drives conversions.
Main Part:
Achieving a full-width layout on your Genesis WooCommerce shop page involves removing the default sidebar and expanding the content area to span the entire width of the browser. Here’s a breakdown of the most effective methods:
Method 1: Using Custom CSS (The Simplest Approach)
This method is ideal if you’re comfortable adding custom CSS to your theme.
1. Access your WordPress Customizer: Go to Appearance > Customize in your WordPress dashboard.
2. Navigate to “Additional CSS”: This section allows you to add custom CSS rules without directly modifying your theme files.
3. Add the following CSS code:
.woocommerce.archive .site-inner {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
.woocommerce.archive .content-sidebar-wrap {
display: flex;
}
.woocommerce.archive .content {
width: 100%;
}
.woocommerce.archive .sidebar {
display: none;
}
4. Publish your changes: Click the “Publish” button to save and apply your custom CSS.
Explanation of the CSS Code:
- `.woocommerce.archive .site-inner`: Targets the main container of the shop page. `max-width: 100%` ensures it spans the full width. `padding-left: 0; padding-right: 0;` removes any default padding that might be present.
- `.woocommerce.archive .content-sidebar-wrap`: This makes the content and sidebar a flex container
- `.woocommerce.archive .content`: Sets the content area to take up 100% of the available width.
- `.woocommerce.archive .sidebar`: Hides the sidebar completely.
Method 2: Using a Genesis Child Theme (Recommended for Long-Term Customizations)
Using a child theme is the best practice for making significant customizations to your Genesis framework. This ensures your changes are preserved during theme updates.
1. Create a Genesis Child Theme: If you don’t already have one, create a child theme for your Genesis installation. There are plugins available to help with this, or you can manually create the necessary files (style.css and functions.php).
2. Edit the `functions.php` file in your child theme: Add the following code to remove the default sidebar and add a full-width layout:
<?php
add_filter( ‘genesis_site_layout’, ‘full_width_woo_layout’ );
function full_width_woo_layout( $layout ) {
if ( is_shop() || is_product_category() || is_product_tag() ) {
return ‘full-width-content’; // Or ‘content-sidebar’ if you want to keep the sidebar on other pages
}
return $layout;
}
add_filter( ‘body_class’, ‘woo_body_class’ );
function woo_body_class( $classes ) {
if ( is_shop() || is_product_category() || is_product_tag() ) {
$classes[] = ‘full-width-woo’;
}
return $classes;
}
add_action( ‘wp_enqueue_scripts’, ‘custom_woo_style’ );
function custom_woo_style() {
wp_enqueue_style( ‘custom-woocommerce-style’, get_stylesheet_directory_uri() . ‘/style.css’ );
}
?>
3. Add CSS to your child theme’s `style.css` file: Use the same CSS code as in Method 1, but add it to the `style.css` file of your child theme.
Explanation of the PHP Code:
- `add_filter( ‘genesis_site_layout’, ‘full_width_woo_layout’ );`: This filter modifies the Genesis layout settings.
- `full_width_woo_layout( $layout )`: This function checks if the current page is the shop page, a product category page, or a product tag page. If it is, it returns ‘full-width-content’, telling Genesis to use the full-width layout.
- `add_filter( ‘body_class’, ‘woo_body_class’ );`: This filter adds a custom body class to the shop page.
- `woo_body_class( $classes )`: This function adds the class `full-width-woo` to the “ tag, allowing you to target the shop page specifically with CSS.
- `add_action( ‘wp_enqueue_scripts’, ‘custom_woo_style’ );`: Enqueues the CSS file for the child theme.
Method 3: Using a Plugin (For Non-Coders)
Several plugins can help you achieve a full-width layout without writing any code. While convenient, using too many plugins can impact your site’s performance. Consider these options carefully:
- Genesis Visual Customizer: This plugin offers a visual interface for customizing your Genesis theme, including layout options for WooCommerce pages.
- Fullwidth Templates for WooCommerce: This plugin provides full-width page templates that you can apply to your shop page.
Which Method Should You Choose?
- Custom CSS: The simplest and quickest option for minor adjustments.
- Genesis Child Theme: The most robust and recommended approach for long-term customizations and ensuring theme update compatibility.
- Plugin: A convenient option for users who are not comfortable with code, but be mindful of plugin bloat.
Conclusion:
Creating a full-width shop page in Genesis WooCommerce is a simple yet effective way to enhance the visual appeal and user experience of your online store. By removing the sidebar and expanding the content area, you can showcase your products in a more engaging and impactful manner. Whether you choose the custom CSS approach, the child theme method, or a plugin, the steps outlined in this article will guide you toward achieving a stunning, full-width shop page that drives sales and boosts your brand image. Remember to test your changes on different devices to ensure responsiveness and optimal viewing across all platforms. Good luck!
