Change Store Page Layout to Full Width in WordPress
How to make store page full width in wordpress;
Change wordpress store layout to full width;
Make woocommerce product page full width;
Full width layout for wordpress store page;
Set wordpress store page to full width;
Woocommerce full width product page settings;
Wordpress store page full width tutorial;
Adjust store page to full width in wordpress;
Full width store page wordpress guide;
Convert 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.phpfile 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.phpfile and save it somewhere safe. - Insert the Code: Scroll to the bottom of the
functions.phpfile 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.