Move WooCommerce Category Description Below Products: A Simple Guide
Do you want to improve the layout of your WooCommerce category pages? A common request is to move the category description from its default position above the products to below them. This can improve the visual flow of your page and make it easier for customers to browse your products.
The Problem:
By default, WooCommerce displays the category description above the products. This can feel a bit disjointed, particularly if the description is lengthy or not immediately relevant to product browsing.
The Solution:
We'll use a simple snippet of CSS to reposition the category description below the products. Here's the original code, assuming you're using the default WooCommerce theme:
/* Move the category description below the products */
.woocommerce .taxonomy-description {
margin-top: 20px;
}
Understanding the Code:
.woocommerce .taxonomy-description: This targets the specific HTML element that holds the category description on WooCommerce pages.margin-top: 20px;: This adds a 20px margin to the top of the category description. This ensures that there is some space between the products and the description.
Implementing the Solution:
- Access Your Theme's Stylesheet: You can add this CSS to your theme's stylesheet. Navigate to Appearance -> Customize -> Additional CSS in your WordPress dashboard and paste the code.
- Child Theme: If you're using a child theme, add the code to your child theme's stylesheet to avoid overwriting the parent theme's styles.
- Custom Plugin: Alternatively, create a custom plugin and add the CSS within the plugin's PHP file.
Additional Tips:
-
Customize Spacing: Adjust the
margin-topvalue to control the amount of spacing between the products and the description. -
Conditional Styling: You can use more specific CSS selectors to target the category description on particular pages or for specific categories. For example, you can target a specific category slug:
.woocommerce .taxonomy-description.category-slug-name { margin-top: 20px; }
Visual Impact: This simple CSS tweak can significantly enhance the layout of your WooCommerce category pages, leading to a more user-friendly experience for your customers. By positioning the description below the products, you create a natural flow that encourages browsing and discovery.
Remember: This guide provides a basic solution. Your specific theme may use different class names or require additional adjustments. Experiment with the code and tailor it to your exact needs.
Further Resources:
- WooCommerce Documentation: https://woocommerce.com/document/
- WordPress Developer Resources: https://developer.wordpress.org/
By making this simple change, you can improve the visual appeal and user experience of your WooCommerce category pages, ultimately contributing to a more successful online store.
