/
Wordpress + Woocomerce Integration Plugin how-to

Wordpress + Woocomerce Integration Plugin how-to

Owned by Ekaterina Slesarchik
Last updated: 2024-12-17 by Dmitry Galyuk (Deactivated)
4 min read

You are just a few steps away from completing a successful integration and boosting your sales with it.

 Please note that prior to the integration, you need to get a Wizart API Token. You can find it in your Wizart PIM account. In order to get a Wizart PIM account, please start your free trial at www.wizart.ai.

Homepage - adding a floating button launching the Visualizer to the homepage. The floating button with a glitter effect moves along the screen when scrolling (i.e is always seen on the screen). The floating button is placed by default in the bottom right corner of the website homepage.

Product page - adding an entry point button for each product item on an individual product page. The entry point button is static (i.e. does not change its position on the webpage). This button is placed by default below each element that you choose on the product page. It launches the Visualizer, and the corresponding product is automatically applied on the chosen surface.

Please, make sure the unique SKU ID (vendor code) of the product item on your website corresponds to the unique SKU ID you uploaded to the Wizart PIM system.

 

We prepared for you step-by-step instructions for super-easy integration by plugin!

 

 

Step 1. Log in your WordPress account and click on ‘Plugins’ in the left side menu bar.

Step 2. Click on ‘Add New’ in the left side menu bar of your WordPress account.

Step 3. Type ‘Wizart’ in the right search bar, and click on ‘Install Now’ after the Wizart Home plugin appears on the list.

Step 4. Click on ‘Activate’.

Now Wizart Home plugin will appear on your list of WordPress plugins.

Step 5. Go to ‘Wizart Home’ in the left side menu of your WordPress account.

 

wp1.png

 

Step 6. Enter your Wizart API Token. You can get your API Token in your Wizart PIM account.

wp2.png

Once you've filled in the token field with your token from PIM, you may select your integration paths. You can choose whether you want a button on the homepage or not. The same applies to the button on a product page.

To enable the button on the homepage, please follow these steps:

  1. Navigate to the "Floating button" section.

  2. Check the "Show button" box.

 

wp3.png

To prevent unexpected issues, please retain the pre-filled values in the fields. Each parameter is designed to customize the button's appearance. For a detailed explanation of each parameter, refer to the description provided below each field. To introduce custom styles, apply CSS to the element with the class "wizart-home-page" (unless you've modified the Class Name field).

To enable the button on the homepage, please follow these steps:

  1. Navigate to the "Entry Point Button" section.

  2. Check the "Show button" box.

 

wp4.png

One important note: the "Element to add button" field is mandatory. Without a value in this field, the button will not be displayed. This field specifies the element on a product page which you want to attach the button to.

To find this element:

  1. Open a product page and press F12 (in Chrome) or right-click on the page and select "Inspect".

  2. Click the element selection tool in the top left corner of the sidebar that appears.

  3. Hover over the element where you want to attach the button and click on it.

  4. The sidebar will focus on the selected element. Find the "class=" attribute and copy the entire class name up to the first space, including the leading dot.

  5. You also can choose where you want to locate the button: before the selected element, after the selected element or include it in the selected element (append).

For example, as shown in the screenshot, you would enter ".wp-block-group" into the "Element to add button" field.

wp5.png

To prevent unexpected issues, please retain the pre-filled values in the fields. Each parameter is designed to customize the button's appearance. For a detailed explanation of each parameter, refer to the description provided below each field. To introduce custom styles, apply CSS to the element with the class "wizart-product-page" (unless you've modified the Class Name field).

 

Related content