Zemowp

Zemowp

Did You Know?

How to add and showcase brands on any page using the Woomen theme.

Estimated reading: 3 minutes 21 views

In WooCommerce, Brands are a default taxonomy that allows you to categorize products by their brand name. With the Woomen theme and Elementor, you can not only create and assign brands but also display them beautifully in a slider format on any page of your store.

This guide will walk you through:

  • Adding a new brand

  • Associating products with a brand

  • Displaying brand logos in a slider with Elementor


Step 1: Adding a New Brand

  1. In your WordPress Dashboard, go to Products > Brands.

  2. You will see existing brands listed here.

  3. To add a new brand:

    • Enter the brand name (e.g., Louis Vuitton).

    • Set a slug (e.g., LV).

    • Click Add New Brand.

  4. Your brand will be added successfully, but initially, it will not show any products.


Step 2: Associating Products with a Brand

You can either create a new product under a brand or assign an existing product to a brand.

Option A: Adding a New Product

  1. Go to Products > Add New.

  2. Enter product details such as name (e.g., Jeans), description, attributes, and shipping details.

  3. Upload a product image and gallery images.

  4. Select the appropriate category (e.g., Denim Jeans).

  5. In the Brands taxonomy section, select the newly created brand (e.g., Louis Vuitton).

  6. Publish the product.

Now, if you refresh the brand page, your new product will appear under that brand.


Option B: Assigning an Existing Product

  1. Go to Products > All Products.

  2. Edit any product you want to assign to a brand.

  3. Scroll to the Brands taxonomy section.

  4. Select the brand (e.g., LV).

  5. Update the product.

The product will now appear on the brand’s page.



Step 3: Adding a Brand Slider in Elementor

If you want to showcase your brands as a slider on a page, follow these steps:

  1. Open the page with Elementor.

  2. Add a container where you want to display the slider.

  3. To create spacing, use the Spacer widget above or below the container.

  4. Set the container to Full Width.

  5. Inside it, add another container (also full width).

  6. Drag and drop the Image widget for each brand logo.

    • Upload your brand logo image.

    • Duplicate the widget to add multiple brand logos.

  7. Select the main logo container, go to layout settings, and set Display: Flex to align logos in a single row.


Step 4: Enabling Slider Functionality

  1. Go to the Advanced Settings of the container that holds the images.

  2. Enable the Slider option.

  3. Choose how many logos to display per slide (e.g., 3).

  4. Save your changes and refresh the page.

Your logos will now appear in a working slider.



Step 5: Linking Logos to Brand Pages

  1. In Elementor, select a logo image.

  2. In the sidebar settings, go to Link > Custom URL.

  3. Copy the brand page URL from your WordPress dashboard (Products > Brands > View) and paste it into the link field.

  4. Repeat this for each logo.

  5. Save changes and refresh the page.


Now, when visitors click on a brand logo, they will be redirected to the brand’s page showing all products under that brand.

Watch the video below to see the complete process