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

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:
  
   - WooCommerce: This tool transforms WordPress websites into e-commerces. 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.
  
  ⚠️ Note: If you’re not using WooCommerce/Elementor or want to add the widget somewhere other than a product page, check out this guide here.
         
  - ArtPlacer Widgets: 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 be informed (the plug in automatically calculates width if not informed).
  
  
• If you’re planning to implement Widgets on a Non Product Page, the Artworks must be previously uploaded to your ArtPlacer Dashboard Artworks’ section. Learn more about that, here.

Product Page Setup:

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.

To ensure the Widget correctly reads artwork dimensions from your product variants, the variant Option Name and/or Option Values must follow the format shown below:

• 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 (website visitor 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)

 WordPress + WooCommerce users:

1. Install the ArtPlacer Widgets plugin on your WordPress site. 

2. Once you have obtained the code from our Widget Generator, open your WordPress Dashboard >  left-hand menu > ArtPlacer > Add.

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

⚠️ IMPORTANT: Elementor users cannot filter collections within the “Create Widget” screen

4. Click 'Save Widget'

Steps for Elementor Users

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

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

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

3. Click 'Save Widget'.

• The 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.

4. Copy the Shortcode (including the square brackets [ ])
 
Example: [artplacer_widget id="12345"]

5. Go to your WordPress Dashboard > Pages.

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

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