How to Remove Products on the Bottom of Your WooCommerce Shop Page: A Beginner’s Guide
Are you staring at a seemingly endless grid of products at the bottom of your WooCommerce shop page and thinking, “This has got to go!”? Don’t worry, you’re not alone. Many WooCommerce users find themselves wanting to customize the layout of their shop and that often means removing those extra products displayed on the bottom.
This guide is specifically designed for beginners who might not be super familiar with WordPress or code. We’ll walk you through the process step-by-step in a clear and easy-to-understand way. Think of it as a gentle nudge in the right direction, rather than a deep dive into complex coding.
Why Remove Products From the Bottom of Your Shop Page?
Before we jump in, let’s consider *why* you might want to do this. Understanding the “why” helps you appreciate the solution.
* Clean Aesthetics: Sometimes less is more. A cleaner, less cluttered page can improve the user experience and make your shop look more professional. Imagine a clothing store that overflows with items – it can be overwhelming!
* Focus on Key Products: You might want to highlight specific products or collections higher up on the page. Having extra products displayed at the bottom can distract from those carefully curated selections.
* Improved Conversion Rates: By removing distractions, you can guide customers towards the products you want them to see and ultimately increase sales. If a user sees too many options they might just leave without adding anything to cart.
* Mobile Optimization: On smaller screens, the bottom products can push the main content far down the page, making it difficult for mobile users to find what they’re looking for.
* Duplicate Content: The products on the bottom of the shop page are typically already listed at the top of the page. This is considered duplicate content and having the same information at the top and bottom of the page can negatively affect your SEO.
Method 1: Using CSS to Hide the Products (The Quick & Easy Route)
This is the simplest method and requires absolutely no coding knowledge! It’s perfect for beginners. We’ll use CSS (Cascading Style Sheets) to “hide” the elements we don’t want to see.
1. Identify the CSS Class: The first step is to inspect the element you want to hide. Go to your shop page, right-click on the section of products at the bottom, and select “Inspect” (or “Inspect Element”) from the menu. This will open your browser’s developer tools.
Look for a `
*Example:* Let’s say the container has the class `related products`.
2. Access the WordPress Customizer: Go to your WordPress dashboard. Navigate to Appearance > Customize.
3. Add Custom CSS: In the Customizer, find and click on “Additional CSS”.
4. Write the CSS: In the CSS editor, add the following code, replacing `related products` with the actual class you identified in step 1:
.related.products {
display: none !important;
}
* Explanation:
* `.related.products` : This targets the element with the class `related products`. Remember to change this to match the class on your own site.
* `display: none;` : This hides the element completely.
* `!important;` : This ensures that our CSS rule overrides any other conflicting styles that might be present in your theme.
5. Publish Your Changes: Click the “Publish” button at the top of the Customizer to save your changes.
Important Notes:
* This method *hides* the products, it doesn’t actually remove them from the page’s code. They’re still technically there, just invisible to the user.
* Make sure you’re using the *correct* CSS class. Inspect the element carefully.
* This works well for simple themes. More complex themes might require more specific CSS.
Method 2: Using Code (For the Slightly More Adventurous)
This method involves adding a bit of PHP code to your WordPress theme (or a child theme!). It’s a more robust solution because it actually prevents the products from being loaded in the first place. This can slightly improve performance.
Caution: Modifying theme files can be risky. It’s *highly* recommended that you create a child theme to avoid losing your changes when your main theme is updated.
1. Create a Child Theme (Highly Recommended): If you don’t have one already, create a child theme. There are many tutorials online to guide you through this process. Google “how to create a wordpress child theme”.
2. Find the Correct Template File: Identify the WooCommerce template file that’s responsible for displaying the extra products. This could be:
* `woocommerce/templates/single-product/related.php` (for related products)
* `woocommerce/templates/single-product/up-sells.php` (for up-sells)
* Or another custom template your theme might be using. Inspect the page source again to get clues.
3. Override the Template (Recommended) or Edit Functions.php:
* Override the Template (Better Practice):
* Copy the template file (e.g., `related.php` or `up-sells.php`) from the WooCommerce plugin directory (`wp-content/plugins/woocommerce/templates/single-product/`) to your child theme’s directory, maintaining the same folder structure (`your-child-theme/woocommerce/templates/single-product/`).
* Open the copied template file in your child theme.
* Delete all the code *inside* the file, leaving it completely empty. This effectively prevents those products from being displayed.
* Edit Functions.php (Less Recommended):
* Navigate to your child theme’s directory and open the `functions.php` file.
* Add the following PHP code to remove the related products:
To remove upsells, you might use:
Important: The `remove_action` function tells WordPress to stop running a specific function (in this case, displaying related products or upsells). The numbers (20 and 15) represent the priority of the function, so it’s important to use the correct values.
4. Save Your Changes: Save the file you modified (either the empty template file or `functions.php`).
5. Test Your Shop Page: Visit your shop page and confirm that the extra products at the bottom are gone.
Which Method Should You Choose?
* For beginners: CSS is the easiest and safest method.
* For slightly more advanced users who want better performance: Using code and a child theme is the recommended approach.
Remember to always back up your website before making any changes, especially when working with code!
By following these steps, you can easily remove the extra products from the bottom of your WooCommerce shop page, creating a cleaner, more focused, and more effective online store. Good luck!
