Wordpress + Woocomerce Integration Plugin how-to

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.

Open

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.

Open

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

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.

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.

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.

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).