Dynamically Create Custom Product Displays Using Product Detail Shortcodes

[admin]

WP eStore has shortcodes that lets you dynamically retrieve a specific details of a product. You can use this to manually build a product display that looks just the way you want it to look like.

Lets create a display that will show the product name, description, price and the buy button. Simply add the following to a WordPress post or page to see how it works (in this example we are assuming the product ID that we are interested in is 1):

[wp_eStore_product_details id=1 info="name"]

[wp_eStore_product_details id=1 info="description"]

[wp_eStore_product_details id=1 info="price"]

[wp_eStore_product_details id=1 info="available_copies"]

[wp_eStore_add_to_cart id=1]

If you are good with CSS then you can customize the CSS and make the display look just how you want it to look. For example, copy and paste the following in “HTML View” of the WordPress post or page editor:

<div class="my-custom-product-display">

<div class="my-custom-product-display-name">

[wp_eStore_product_details id=1 info="name"]

</div>

<div class="my-custom-product-display-description">

[wp_eStore_product_details id=1 info="description"]

</div>

<div class="my-custom-product-display-price">

[wp_eStore_product_details id=1 info="price"]

</div>

[wp_eStore_add_to_cart id=1]

</div>

Now, you can add definition for the “my-custom-product-display”, “my-custom-product-display-name” etc. classes in the CSS file to customize how they look.

Retrieving the Details Using PHP

You can retrieve various product details using PHP code too. Here are some examples:

The following example code will retrieve the product name of product whose ID is 1:

<?php

$id = "1";

$info = "name";

echo eStore_show_product_details($id,$info);

?>

The following example code will retrieve the product price of product whose ID is 1:

<?php

$id = "1";

$info = "price";

echo eStore_show_product_details($id,$info);

?>

The following example code will retrieve the product description of product whose ID is 1:

<?php

$id = "1";

$info = "description";

echo eStore_show_product_details($id,$info);

?>

Retrieving the Product Thumbnail Image

The following shortcode will retrieve the product thumbnail image:

[wp_eStore_product_details id=1 info='thumbnail_url']

You can add HTML code like the following to embed an image with the thumbnail:

<img src="[wp_eStore_product_details id=1 info='thumbnail_url']" />

Displaying a Nicely Formatted Price Value

The following shortcode will display a formatted price value:

[wp_eStore_product_details id=1 info="price_formatted"]

[Zain]

Hi Admin,

Thanks a lot for posting this. Having now played with this I can say that using the [wp_eStore_product_details id=1 info="name"] shortcode can be extremely powerful and can help create really exact, custom built templates!

Additional Tip: the info attribute in the shortcode can pull out anything that you can find in the “wp_estore_tbl” table in your WordPress database.

With the info attribute, you can also pull out things like: “old_price”, “tax”, “show_qty”, “additional_images”, and also “thumbnail_url”. Basically, any information you need that’s in the database can now be displayed.

This is REALLY powerful!

Again, thank you for sharing this as I’ve now managed to use this information to create just the templates I needed for the project I was on*.

Cheers,

Zain

*PS: Actually, I went one step further and built my own custom shortcode to create a way of displaying product items in the order that my client wanted them! The default shortcodes only allows either sorting by ID or A-Z… with a bit of shortcode magic, it’s possible to just add a string of IDs and then render them just how you like! Very, Very Cool!

I’m now using the eStore_show_product_details($id,'x') php function to gain even more control.

Note: replace ‘x’ with the info attribute you want to pull back from the ‘wp_estore_tbl’ table (e.g. ‘price’, ‘target_thumb_url’, ‘old_price’, ‘description’ etc.)

AWESOME! Keep up the great work!

[alexkir]

I would like to customise estore font color and size properties, individually one at a time

[wp_eStore_product_details id=1 info=”name”]

[wp_eStore_product_details id=1 info=”description”]

[wp_eStore_product_details id=1 info=”price”]

Element inspector shows that they inherit their properties from “body”.

What would be the best way to do it?

Thank you

[admin]

You can wrap those shortcodes inside custom CSS classes. Then apply the css customization to it.

Here is an example:

<div class="my-product-name">

[wp_eStore_product_details id=1 info="name"]

</div>

Now, you can use the following CSS code to change the font-size of the product name.

.my-product-name{

font-size: 16px;

}

Note: Remember to go to the “Text” mode of the editor since you are inserting HTML code.

[Author]

Posts