In this brief tutorial we will cover how to install the ArtPlacer Widgets into your WordPress website.
Before we begin, please make sure you understand what different types of widgets and integrations there are and what you need to make them work. Also you will need to know how to prepare the ArtPlacer Widgets from the ArtPlacer Dashboard.
We will be installing the Sample Room Widget. The process for installing the Client Room Widget is quite similar.
Types of integration
We will cover two different ways for installing the ArtPlacer Widget into your WordPress website: Single Artwork Integration and Dynamic Integration.
Refer to this article if you are not sure about what these different integration types involve.
Let’s move to the first step.
Insert the ArtPlacer script into the footer
First we need to install the following code in the footer of our page:
There are several ways of setting this up, but we will cover only two: Using the Theme Editor and Headers and Footers plugin.
Using the Theme Editor
Log in to your WordPress admin, and then click on Theme Editor under the Appearance menu.
Once in Theme Editor, look on the right side menu look for the Theme Footer template and click on it.
The Theme Footer file will open. Add the code before the
</body> tag as in the image below. Click on Update File and you are set.
Using the Header and Footer Plugin
Install Headers and Footers plugin and activate it.
Once the plugin is installed and active, go to Settings on the left side menu and then click Insert Headers and Footers.
<script> code as follows and save.
Insert Widget by using Single Artwork Integration
As described in this article, the Single Artwork type of integration is very easy and straight forward. The downside of this method is that you will have to repeat it for each artwork you would like to “widgetize”.
1. Generate a new widget code. In the Widget Generator, select Single Artwork or Dynamic Integration, either is fine. We will see why shortly.
2. In your WordPress Admin, edit the artwork, product, post or page where you would like to show the widget.
3. In the Main Editor, select the Text tab as follows:
4. Paste your widget code.
5. If you selected Single Artwork integration, the selected artwork will be displayed. If you selected Dynamic Integration, then you will have to enter the URL of the artwork to display in the
In this particular example, we will scroll down to the Product Image block on the right side of the screen.
We click on the image, and copy the URL from there.
Since we are using the
artwork_url – and not referring the artwork from the ArtPlacer catalog – we must set the
height (always in inches) of the artwork. In our case, it is 20.
This is how the Product Image block looks before saving:
We update, and voilà! You are all set.
Insert Widget by using Dynamic Integration
The power of Dynamic Integration resides in the fact that you will be able to only install the Widget once and it will work for all your artworks or products in your catalog. The downside of this kind of integration is that it may require some minor programming skills. However, In this tutorial we will try to make this as easy as possible for everyone.
Installing the Widget for WooCommerce
WooCommerce is a great plugin that turns your WordPress website into a full customizable e-commerce platform.
With no more preambles, let’s begin.
1. Go to the Theme Editor under the Appearance menu, in your left side menu bar.
2. In this case, we will locate and select the artwork or product theme page. It will be most likely under the woocommerce directory. It can change based on the version and the particularities of the theme you are using, but in most cases it will be in the content-single-product.php theme file.
3. Try to find the right spot for your widget buttons. As in the previous step, what you will see here and how hard it is to locate the right spot, will depend on the particularities of the theme you are using. In this example, we will add the buttons within the entry-summary, right before the end of it.
4. In this step, we need to serve the widget code with the image and height attributes of the WooCommerce product that is being displayed “on the fly”.
<artplacer> tag, on the line right above, paste the following code:
<?php $_product = wc_get_product(get_the_ID()); ?>
artwork_url we will set this code:
<?php echo wp_get_attachment_url($_product->get_image_id());?>
height we will set the following code:
<?php echo $_product->get_height();?>
Important: Make sure your product has the height set in inches.
If you would like enter the height in centimeters then you must add this code:
<?php echo $_product->get_height() / 2.54;?>
If you are installing the Client Room type widget, you can set the descriptive
price option as follows:
<?php echo strip_tags(wc_price($_product->price));?>
and the descriptive
size option like this:
<?php echo $_product->get_dimensions();?>
The ArtPlacer Widget enriches your content and takes your website to the next level. It allows your clients to try your artworks at home.
WordPress is a great platform that allows for multiple ways of adding complex content, is very intuitive and user friendly.
We presented two different ways of adding the ArtPlacer Widgets to your WordPress sites with different levels of difficulty and different outcomes.
If you need further help installing the ArtPlacer Widgets into WordPress, please contact us.