WordPress + WooCommerce: How to Install ArtPlacer Widgets

Table Of Contents

• Product Page Setup
• Installation Process (Product Page Only)
• Steps for: WordPress + WooCommerce users
• Steps for: Elementor Users
• If you’re not using WooCommerce/Elementor or want to add the widget somewhere other than a Product Page, check out this guide here

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.
  
  
• If you’re planning to implement Widgets on a Non Product Page, the Artworks need to be previously uploaded to your ArtPlacer Dashboard Artworks’ section. 
  
  Learn more about that, here.

Product Page Setup.

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.

Compatible Formats (Required for Size Variants)

To ensure the Widget correctly reads artwork dimensions from your product variants, the variant Option Name and Option Values must follow compatible formats.

• Accepted Option Names:
  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.
  
  
• Accepted Option Value Formats:
  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). 
  
  

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

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

⚠️Note: The size variants may be displayed to visitors as individual buttons or within a dropdown selector, both formats are fully supported as long as the formats above are followed.

Installation Process (Product Page Only)

 Steps for: WordPress + 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. 

Steps for 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.