WordPress + WooCommerce: How to Install ArtPlacer Widgets

After creating a Widget, you are ready to add the code obtained from our Widget generator to your WordPress website.

This article describes the steps for adding the code of any type of Widget to a WordPress/WooCommerce product page only.

Table Of Contents

• Initial Considerations:
• Set Up Artwork Dimensions
• Adding the code (WordPress websites + WooCommerce users):
• If you’re using Elementor, follow these steps to add your ArtPlacer widget to a page

Initial Considerations:

• An active Gallery Plan is required to use this feature.
  
  
• You must have generated and obtained the necessary implementation codes from the Widgets’ section. Learn how to properly do that, here.
  
  
• The following plugins/add-ons must be installed:
  
           1. WooCommerce: 

  • This tool transforms WordPress websites into eCommerce stores. Without it, 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.   
           
    2. 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 download it.
    
    

• If you’re planning to implement Widgets on a Product Page (Shop page) the products (hence the Artworks) must be previously listed as physical products with specified height and width in the Shipping Dimensions Section. Learn how to properly do this, here.
  
  ⚠️ Note: The height must always be completed. If the width or length is not specified, our system automatically calculates it.

Set Up Artwork Dimensions

• If you’re planning to implement Widgets on a Product Page (Shop page) the products (hence the Artworks) must be previously listed as physical products with specified height and width in the Shipping Dimensions Section. Learn how to properly do this, here.

⚠️ Note: The height must always be completed. If the width or length is not specified, our system automatically calculates it.

If your products include variants, please review the following guidelines.

• You can find detailed instructions on how to properly set up product variants here.

• The compatible product variants’ Option name to specify size or dimensions are the following: “Size”; “Sizes”; “Sizing”; “Dimension”; “Dimensions”; “Measurements”; “Measures”. 
  NOTE: If your site is offered in different languages, please reach out to us for further information on this matter.
  
  
• The compatible variant Option values formats are the following: “WxH in (or CM)”; “HxW in (or CM)”; “WxH in (or CM) - text”; “HxW in (or CM) - text” (where W= width value and H= height value - see an example below). 

Size variants should look similar to this from the visitor's POV  (numeric values upfront):

 Adding the code (WordPress websites + WooCommerce users):

• Install the ArtPlacer Widgets plugin on your WordPress site. 

• Once you have obtained the code from our Widget Generator, in your WordPress Dashboard, go to the left-hand menu and select ArtPlacer > Add.
  
  
  
  
  On the Create Widget page:

• Enter a name for your widget in the Name field. This name is for your reference only and will not appear on the button itself.
• Paste the Button Code (from the Widget Generator) into the Button Code box.
• Choose the Widget Position (e.g., above or below the product description). Available positions may vary depending on your theme.
  
  
  
  

• (Optional) In Exclude Collection (Product Category), select categories where you don’t want the widget button to appear.
• Click Save Widget. 

Elementor Users:
If you’re using Elementor, follow these steps to add your ArtPlacer widget to a page:

1. Set Up the Widget in the Plugin

   • Once you have obtained the code from our Widget Generator, in your WordPress Dashboard, go to the left-hand menu and select ArtPlacer > Add.

   • Configure your widget by giving it a name and selecting the widget position

   • Click Save Widget.

   • Our plugin is configured to detect if you’re using Elementor. Given the case, a Shortcode will appear right below the widget name on the Installed Widgets page.

2. Copy the Shortcode

• Copy the entire shortcode, including the square brackets [ ].
   Example: [artplacer_widget id="12345"]

3. Open the Page in Elementor

• Go to your WordPress Dashboard > Pages.

• Find the page where you want to add the widget and click Edit with Elementor.

• Once you’re in the editor, simply follow the steps outlined in this article

⚠️  Important:

• Elementor users cannot filter collections within the “Create Widget” section, like with WooCommerce. 
  
  

• If you’re not using WooCommerce/Elementor or want to add the widget somewhere other than a product page, check out this guide here