# How to Add WooCommerce Products in Oxygen 2.0: A Comprehensive Guide
Adding WooCommerce products to your website built with Oxygen 2.0 can seem daunting at first, but with a clear understanding of the process, it’s surprisingly straightforward. This guide provides a step-by-step walkthrough, ensuring you can seamlessly integrate your products and create a compelling online store.
Setting the Stage: Prerequisites and Initial Setup
Before diving into adding products, ensure you have the following in place:
- WordPress Installation: You’ll need a fully functional WordPress website.
- WooCommerce Plugin: Install and activate the WooCommerce plugin. This is the foundation for your online store.
- Oxygen Builder: Make sure Oxygen 2.0 is installed and activated. This is crucial for building the visual aspects of your product displays.
- Theme Compatibility: While Oxygen is largely theme-independent, ensure your chosen theme doesn’t conflict with WooCommerce’s functionality. A lightweight theme is often recommended for optimal performance.
- `[products]`: Displays all products.
- `[featured_products]`: Displays featured products.
- `[best_selling_products]`: Shows your best-selling items.
- `[sale_products]`: Highlights products on sale.
- `[product_category category=”category-slug”]`: Displays products from a specific category (replace “category-slug” with the actual slug).
- `[product id=”product-id”]`: Shows a single product (replace “product-id” with the product’s ID).
- Modify CSS: Use Oxygen’s built-in CSS editor to tweak colors, fonts, spacing, and other visual elements of your product listings.
- Dynamic Data: Oxygen’s dynamic data features can pull product information (like price, title, or description) directly into your design, allowing for unique layouts for each product.
- Custom Layouts: Create completely custom product display layouts by designing individual product cards or rows using Oxygen’s components and then linking them to your WooCommerce products through the shortcode or widget method.
Adding WooCommerce Products using Oxygen Builder
Oxygen doesn’t directly add WooCommerce products; instead, it leverages WooCommerce’s shortcodes and widgets to display them within your page designs. Here’s how you can incorporate your products effectively:
1. Using WooCommerce Shortcodes
This is the most flexible method for incorporating products into your Oxygen designs. WooCommerce offers a range of shortcodes to display different product collections.
How to use shortcodes in Oxygen:
1. Create or edit a page in Oxygen.
2. Add a “Text” element.
3. Paste your chosen WooCommerce shortcode into the Text element’s content area. For example: `[featured_products]`
4. Save and preview your page. Oxygen will render the products based on the shortcode.
Customizing Shortcodes: Many shortcodes offer attributes for customization (e.g., `per_page`, `columns`). Refer to the WooCommerce documentation for detailed information on available attributes.
2. Using WooCommerce Widgets
WooCommerce provides widgets that can be added to Oxygen’s sidebar areas or other widget-ready sections. This is ideal for showcasing specific product categories or collections in sidebars or footers.
1. Create or edit a page in Oxygen.
2. Access the page’s sidebar or widget area. This usually involves adding a sidebar or widget element provided by Oxygen or your theme.
3. Add the desired WooCommerce widget (e.g., “Products,” “Featured Products,” etc.) through the widget area’s settings.
4. Configure the widget’s settings (number of products, category, etc.).
5. Save and preview the changes.
3. Advanced Techniques: Customizing Product Displays with Oxygen’s Functionality
Oxygen’s strength lies in its visual page building. Once you’ve added products using shortcodes or widgets, you can leverage Oxygen’s powerful features to customize the product display’s appearance:
Conclusion: Mastering WooCommerce Integration with Oxygen 2.0
By combining the power of WooCommerce’s product management with Oxygen’s visual design capabilities, you can create a stunning and highly functional online store. Remember to utilize the shortcode method for maximum flexibility, explore the widget options for convenient placement, and leverage Oxygen’s features for advanced customization. With practice and a little experimentation, you’ll master the art of seamlessly integrating WooCommerce products within your Oxygen 2.0 designs.
