Design Custom Product Categories in Elementor & Astra

Preface

Are you looking to elevate your online store’s design and provide a more engaging shopping experience for your customers? Customizing your product categories is a fantastic way to do just that! With the powerful combination of Elementor and Astra, you can create visually stunning and highly functional category pages that reflect your brand and enhance user navigation. This guide will walk you through the steps to design custom product categories, helping you make a lasting impression on your visitors.

Why Customize Product Categories?

Before diving into the how-to, let’s understand why customizing product categories is so important:

• Brand Identity: Custom designs allow you to maintain a consistent brand image across your entire website.
• Improved User Experience: Well-designed categories make it easier for customers to find what they’re looking for, reducing bounce rates and increasing conversions.
• Highlight Key Products: Use visuals and layouts to draw attention to specific items or promotions.
• SEO Benefits: Optimized category pages can improve your search engine rankings, driving more organic traffic to your store. Check out this great article on how to optimize your website for SEO.

Prerequisites

To follow this tutorial, you’ll need the following:

• WordPress Installed: A self-hosted WordPress installation.
• WooCommerce Plugin: The WooCommerce plugin installed and activated.
• Elementor Page Builder: The Elementor page builder plugin (free or Pro version).
• Astra Theme: The Astra theme installed and activated. Consider Astra Pro for enhanced features.

Hint: You can find out more about Astra Starter Templates here

Step 1: Install and Activate Required Plugins and Theme

1. Install Astra Theme:
   • Go to Appearance > Themes in your WordPress dashboard.
   • Click Add New and search for ‘Astra.’
   • Install and activate the Astra theme.
2. Install WooCommerce:
   • Go to Plugins > Add New.
   • Search for ‘WooCommerce.’
   • Install and activate the WooCommerce plugin. Follow the setup wizard to configure your store.
3. Install Elementor:
   • Go to Plugins > Add New.
   • Search for ‘Elementor.’
   • Install and activate the Elementor plugin.

Step 2: Create or Edit a Product Category

1. Navigate to Categories: Go to Products > Categories in your WordPress dashboard.
2. Create a New Category or Edit an Existing One:
   • To create a new category, fill in the Name, Slug, and Description fields. You can also set a parent category if needed.
   • To edit an existing category, hover over the category name and click Edit.
3. Add a Category Image: The category image is crucial for visual appeal. Scroll down to the Upload/Add image option and add a relevant image.
4. Update the Category: Click the Add New Category or Update button to save your changes.

Step 3: Create a Custom Category Template with Elementor

Here’s where the magic happens! You’ll create a custom template that will be applied to your product category pages.

1. Go to Templates > Theme Builder: In your WordPress dashboard, navigate to Templates > Theme Builder.
2. Add New Template:
   • Click Add New.
   • Choose Product Archive as the template type.
   • Give your template a name (e.g., ‘Custom Category Template’) and click Create Template.
3. Design Your Template: The Elementor library will appear with pre-designed blocks and templates. You can:
   • Choose a Pre-designed Template: Select a template that suits your style and customize it.
   • Create from Scratch: Click the ‘X’ to close the library and start with a blank canvas.

Info: If you are new to Elementor feel free to read our article Getting Started with Elementor: The Complete Guide.

Step 4: Designing Your Category Page with Elementor

Here are some elements and layouts you might want to include in your custom category template:

• Category Title:
  • Use the Heading widget to display the category name. You can dynamically pull the category name using Elementor’s dynamic tags.
  • Go to the Heading widget settings, click on the Dynamic Tags icon (the little cylinder), and select ‘Term Name.’ Then, choose ‘Category’ as the term.
• Category Description:
  • Use the Text Editor widget to display the category description.
  • Similarly, use Dynamic Tags to pull the category description. Select ‘Term Description’ and choose ‘Category’.
• Category Image:
  • Use the Image widget to display the category image.
  • Use Dynamic Tags and select ‘Term Image’ to dynamically display the category image.
• Product Grid:
  • Use the Products widget to display products from the current category.
  • Adjust the layout, columns, and product count as needed.
  • Enable or disable features like ‘Add to Cart’ buttons, product ratings, and sale flashes.
• Filters & Sorting:
  • Add widgets like Product Filters or Product Sorting to enhance the user’s browsing experience. These are often available in Elementor Pro or through third-party add-ons.

Hint: Make sure you use Typography that is attractive. We also have an article about Top 10 Free Best Google Fonts for your Website if you want to learn more.

Step 5: Styling Your Category Page

• Consistent Branding: Use your brand colors, fonts, and imagery to create a cohesive look.
• Spacing & Alignment: Pay attention to spacing and alignment to ensure a clean and professional design.
• Typography: Choose readable fonts and appropriate font sizes for headings and body text.
• Call-to-Action Buttons: Use prominent call-to-action buttons (e.g., ‘Shop Now’) to encourage purchases.

Step 6: Set Display Conditions

Now, you need to tell Elementor where to display your custom template.

1. Click the Publish Button: In the Elementor editor, click the Publish button.
2. Add Condition: Click Add Condition.
3. Choose Categories: Select Product Category and then choose the specific categories you want to apply the template to. You can select multiple categories or choose ‘All Product Categories’ to apply the template to all categories.
4. Save & Close: Click Save & Close.

Info: Make sure to test your design on different devices to ensure it’s responsive and looks great on desktops, tablets, and mobile phones.

Don’t forget to check out our article on How to Quickly Make High-Resolution Screenshots in Base 64 if you want to showcase the template properly!
## Step 7: Test and Refine

Visit your product category pages to see your custom design in action. Make any necessary adjustments to improve the layout, styling, or functionality. Consider A/B testing different designs to see what works best for your audience.

Conclusion

Customizing your product categories with Elementor and Astra allows you to create a unique and engaging shopping experience for your customers. By following these steps, you can transform your category pages into powerful marketing tools that drive sales and strengthen your brand. Start experimenting with different designs and layouts to find what works best for your store, and watch your conversions soar!