How to Add the Widget Code to Your WordPress (WooCommerce required) Website

After creating a widget, you are ready to add the code generated by ArtPlacer to your website and enable the widget for visitors to use.

This article describes the steps for adding the code of any type of widget to product and non-product pages on WordPress sites that use the WooCommerce plugin. 

PREREQUISITES

Before adding the widget code to your WordPress website, ensure the following plug-ins are installed:

• WooCommerce: This plug-in transforms WordPress websites into eCommerce stores. Without this plug-in, you won’t be able to add an ArtPlacer widget to your WordPress website. Visit the Plugins section on the WordPress website and search for the WooCommerce plugin, or follow this link to learn how to download it.

• ArtPlacer Widget: This plug-in allows you to add ArtPlacer’s widget code to your WordPress website. Visit the Plugins section on the WordPress website and search for the ArtPlacer Widget plugin, or follow this link to learn how to download it. 

• Elementor: Optionally, you can install this plug-in, which allows WordPress users without coding skills to create professional websites. Visit the Plugins section on the WordPress website or follow this link to learn how to download it. Without it, you can still add the ArtPlacer code to your WordPress website–read the Add the Widget Code to WordPress (WooCommerce required) Website without Elementor section below.

Note: If you are using the Elementor plug-in, you don’t need to download the ArtPlacer Widget plug-in to add the widget code.

Add the Widget Code to a WordPress (WooCommerce required) Website without the Elementor Plug-in

Product Page

1. On your WordPress admin dashboard, click ArtPlacer on the sidebar and then Add.

2. On the Create Widget page, type a name for the code in the Name field. 

3. Paste the widget’s button code into the Button Code box. This is the code you obtained in the last step of the widget creation process.

4. Under Widget Position, select where you want the widget button to appear–for example, above or below the product description. The options may vary according to the theme used on your website.

5. Under Exclude Collection, check the categories where you don’t want to display the widget button. 

6. Click Save Widget.

Non-Product Page

1. On your WordPress admin dashboard, click Pages on the sidebar and select the page where you want to add the widget.

2. On the page, scroll down, and click Add block.

3. In the popup that appears, click Shortcode.

4. Paste the widget’s button code into the box in the Shortcode popup. This is the code you obtained in the last step of the widget creation process.

5. Click Save draft if your page is not ready to be published. Otherwise, click Publish. 

Add the Widget Code to a WordPress (WooCommerce required) Website with the Elementor Plug-in

Product and Non-Product Pages

1. On your WordPress admin dashboard, click Pages on the sidebar.

2. Locate the page where you want to add the widget and click Edit with Elementor.

3. In the Elements tab of Elementor’s sidebar, locate the Shortcode widget by scrolling down the widget list or typing “shortcode” on the sidebar’s search bar.

4. Drag and drop the Shortcode widget into the content area. 

5. In the sidebar, paste the widget’s button code into the box under Shortcode. This is the code you obtained in the last step of the widget creation process.

6. Click UPDATE.