How to Create Two Different Colors for WooCommerce Product Title with Elementor

WooCommerce is a popular e-commerce plugin for WordPress that allows you to sell products/services on your website. By default, WooCommerce products have a single color for their titles. However, you can use Elementor to create two colors for your product titles. This can be a great way to highlight specific products or to create a more visually appealing product page.

Steps to Create Two Different Colors for WooCommerce Product Titles with Elementor

Step 1: Create the Custom Fields Using ACF

First, create custom fields to place the text. We will use the text as the WooCommerce product titles. ACF is one of the custom field plugins that support that.

Once you’ve downloaded and installed the ACF plugin into your WordPress, open the plugin and create a new field group by clicking the Add New button. Afterward, you can put any name for your field group.

Next, add two fields to your field group. Set the field type to Text, add a label for each field, and then set the field group to show in your WooCommerce product. In this example, we add 1st color for the first field label and 2nd color for the second field label (See the image below).

Once you are done creating the custom fields, go to the Settings block and assign the custom fields group to Product.

Apply the changes by clicking the Save Changes button.

Step 2: Create or Edit the WooCommerce Product

Alright, now we’re moving on to the next step. We will add the product title to the Field Group (first and second fields) we’ve just created.

On your WordPress dashboard, go to Products to create a new product or select the existing one.

Once you enter the WooCommerce Product editor, scroll down, and you will find the Field Group you’ve just created, then add the titles to the input fields. In this example, our product has three words “Willy White Blouse“. We add the “Willy” to the first field and the “White Blouse” to the second field.

Once you add the product title to the fields, don’t forget to update or publish your WooCommerce product by clicking the Update or Publish button.

Step 3: Create or Edit the Elementor Single Product Template

Well, we continue to the last step of this tutorial. Here, we will use the help of Elementor Theme Builder to create a WooCommerce Single Product template, which is the Theme Builder only accessible in Elementor Pro, so please ensure that you’ve already upgraded to the pro version.

On your WordPress dashboard, go to Templates -> Theme Builder. Once you enter the Theme Builder screen, navigate to the Single Product tab, create a new single product template, or select an existing one.

Once in the Elementor editor, tweak and style up your single product template to your liking.

Next, we will make some changes as below:

• Remove the Product Title

If your single product template has a Product Title widget, you must delete it first.

• Add the Heading Widgets

Next, add the two Heading widgets to your single product template to replace the function of the Product Title widget that is used to display your product titles. Replace the text and set the HTML Tag to H1 for each heading widget. To make the two Heading widgets in an inline position (side by side), set the width of each widget to Inline. You can find this option under the Advanced tab on the Layout settings block.

Afterward, you can style up your Heding widgets, such as the size, typography, text color, etc. Don’t forget to adjust the space between the first Heading widget and the second widget. In this example, we add the 7px right margin to the first widget.

• Set the Heading Title to ACF Field

It’s time to set the Heading Titles as a dynamic tag to the ACF Field you’ve created before.

On the Heading widget, navigate to the Title, then click the Dynamic Tags icon. Please scroll down to find the ACF Field option, then click on it.

Afterward, click the wrench icon (🔧), then select your field (first Heading to the first ACF field and the second Heading widget to the second ACF field).

That’s it. Now your WooCommerce product titles have two different colors. Don’t forget to update or publish your Single Product template when finished.

(Bonus) Creating Two Different Colors for WooCommerce Product Titles Dynamically

This bonus section delves into an advanced technique enabling you to create two different colors for your WooCommerce product titles dynamically. This means you have the flexibility to choose what colors for your product titles just before publishing your products on the WooCommerce product editor.

Note: Please follow the step-by-step instructions for creating two colors for Woo Commerce product titles with Elementor above before you continue this tutorial.

Step 1: Add two more Custom Fields

First, you need to add two more custom fields to the Field Group you’ve created previously. But this time, as a Color Picker type.

Go to your Field Group and add the new fields by clicking the Add Field button. Next, add a label and set the field type to Color Picker for each field.

Once you’ve added the fields, don’t forget to apply the changes by clicking the Save Changes button.

Step 2: Set the Text Color Heading Widgets to Dynamic

In this step, we will set the text color of two Heading widgets you’ve added to the dynamic on your Single Product template.

Go to your Single Product template, then navigate to the Heading settings. Under the Style tab, please navigate to the Text Color options, then set it to dynamic by clicking the Dynamic Tags icon. Once you click the Dynamic Tags icon, you will see the ACF Color Picker Field option and click on it.

Afterward, click the wrench icon (🔧), then select your color picker field (first Heading widget to the first ACF color picker field and the second Heading widget to the second ACF color picker field).

Apply the changes to your Single Product template by clicking the UPDATE button.

Step 3: Set the WooCommerce Colors Title

It’s time to set the two different colors for your WooCommerce product title.

Edit one of your WooCommerce products and you will see that now your field group has four fields. Navigate to your Color Picker fields, and then you can set the two colors for your WooCommerce product by clicking the Select Color button.

Once you set the two different colors for your title, don’t forget to click the Update button to apply the changes. You can view the product to see the result.

The Bottom Line

This tutorial showed you how to create two colors for WooCommerce product titles statically or dynamically with Elementor. This is a great way to add visual interest to your product pages and make your products stand out. You’ve learned to implement this feature without inputting code through this tutorial’s simple yet effective steps. Embracing these techniques empowers you to establish a more engaging and dynamic product presentation, ultimately contributing to higher customer engagement and potentially boosting sales.