Change Store Page Layout to Full Width in WordPress

How to make store page full width in wordpressChange wordpress store layout to full widthMake woocommerce product page full widthFull width layout for wordpress store pageSet wordpress store page to full widthWoocommerce full width product page settingsWordpress store page full width tutorialAdjust store page to full width in wordpressFull width store page wordpress guideConvert wordpress store page to full width

Explanation

Want to make your WooCommerce store page full width? Here's a simple way to do it!

What This Does:

Removes the sidebar from your store pages, giving you more space for your products.
Adjusts the main content area to take up the full width of the page.

How It Works:

The code checks if you're on a shop, product category, or product tag page.
If you are, it removes the sidebar by stopping it from loading.
It then adds some custom CSS to make the main content area stretch across the full width of the page.

What You Need to Do:

Copy the code into your theme's functions file.
That's it! Your store pages should now be full width.

This approach is great for showcasing your products without distractions. Enjoy your new, spacious store layout!

Code
// Function to make WooCommerce store page full width
function wp_dudecom_make_store_page_full_width() {
    if (is_shop() || is_product_category() || is_product_tag()) {
        // Remove sidebar
        remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar', 10);

        // Add custom CSS to make the content area full width
        add_action('wp_enqueue_scripts', 'wp_dudecom_add_full_width_css');
    }
}
add_action('wp', 'wp_dudecom_make_store_page_full_width');

// Function to enqueue custom CSS for full width layout
function wp_dudecom_add_full_width_css() {
    $custom_css = "
        .woocommerce-page #primary {
            width: 100%;
            float: none;
        }
        .woocommerce-page #secondary {
            display: none;
        }
    ";
    wp_add_inline_style('woocommerce-general', $custom_css);
}

Instructions

File Location: functions.php (in your active theme) or a custom plugin file.

Prerequisites:

Ensure WooCommerce is installed and activated on your WordPress site.
Have access to your WordPress theme files or know how to create a custom plugin.

Implementation Steps:

Access Your Theme Files: Log in to your WordPress admin dashboard. Navigate to Appearance > Theme Editor. Select the functions.php file from the right-hand side.
Backup Your File: Before making any changes, it's a good idea to copy the existing content of your functions.php file and save it somewhere safe.
Insert the Code: Scroll to the bottom of the functions.php file and paste the provided code.
Save Changes: Click the Update File button to save your changes.
Verify the Changes: Visit your WooCommerce store page to ensure the layout is now full-width without the sidebar.

If you encounter any issues or need further assistance, consider reaching out to wp-dude.com for expert help with your WordPress implementation or advanced functionality needs.