Title: Simple shortcode customization
Last modified: May 24, 2018

---

# Simple shortcode customization

 *  Resolved [gComm](https://wordpress.org/support/users/gcommercepk/)
 * (@gcommercepk)
 * [8 years ago](https://wordpress.org/support/topic/simple-shortcode-customization/)
 * I want to customize the default shortcode [products skus=””]. Currently the short
   code only displays product image,name and price. But I want it to display a piece
   of html with each product after the price. The HTML I want to display is :
 * <div class=”btn”> hello </div>
 * Please give the the snippit to create a shortcode that can do this. Thanks in
   advance.

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Support [Riaan K.](https://wordpress.org/support/users/riaanknoetze/)
 * (@riaanknoetze)
 * [8 years ago](https://wordpress.org/support/topic/simple-shortcode-customization/#post-10316020)
 * Hi there,
 * Is there any reason you’d like a button to display without an `HREF` value? The
   reason I’m asking is that you could easily add that using the CSS `:after` or`:
   before` selector and then add the `content: "Hello";` property 🙂
 * If that’s not going to work for you, you’d need to look into using a hook/filter
   to add the additional markup to the shortcode. For a full list of hooks/filters
   that are executed on any given page, you could take a closer look at [http://hookr.io/plugin](http://hookr.io/plugin)
 *  Thread Starter [gComm](https://wordpress.org/support/users/gcommercepk/)
 * (@gcommercepk)
 * [8 years ago](https://wordpress.org/support/topic/simple-shortcode-customization/#post-10318178)
 * Thanks for the quick reply. Actually i do want to add an href value the final
   HTML i want to add if this :
 * <div class=”button” style=”cursor: pointer;” onclick=”window.location=’/next-
   page/?{product SKU goes here}’;” class=”sbutton”> HELLO </div>
 * As you can see from the HTML above i want to add an href value and then pass 
   a variable into the url which will be the sku of the product being shown. Please
   can you give me code snippit that i can use the create new short code to achieve
   this ? Thanks !
 *  [Mikey Arce](https://wordpress.org/support/users/mikeyarce/)
 * (@mikeyarce)
 * [8 years ago](https://wordpress.org/support/topic/simple-shortcode-customization/#post-10324195)
 * Hi [@gcommercepk](https://wordpress.org/support/users/gcommercepk/),
 * To echo what RK said, if you need to add detailed information like that, you 
   would need to find a hook that would let you do that. You don’t really want to
   extend a “shortcode”, but the final code that the shortcode is displaying.
 * I would suggest using `woocommerce_after_shop_loop_item`
 * Something like this:
 *     ```
       function marce_after_shop_loop_hook() {
       	echo 'Hello World';
       }
       add_action( 'woocommerce_after_shop_loop_item', 'marce_after_shop_loop_hook' );
       ```
   
 * Now, if you only want that to happen in certain cases, you can use a conditional
   tag like this:
 *     ```
       function marce_after_shop_loop_hook() {
       	if ( is_page( '1030' ) ) {
       		echo 'Hello World';
       	}
       }
       add_action( 'woocommerce_after_shop_loop_item', 'marce_after_shop_loop_hook' );
       ```
   
 * That one would only show on a page with the ID of “1030”.
 * See more WordPress Conditional Tags here:
    [https://developer.wordpress.org/themes/basics/conditional-tags/](https://developer.wordpress.org/themes/basics/conditional-tags/)
 * And the WooCommerce Conditional Tags here:
    [https://docs.woocommerce.com/document/conditional-tags/](https://docs.woocommerce.com/document/conditional-tags/)

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Simple shortcode customization’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

## Tags

 * [Product Loop](https://wordpress.org/support/topic-tag/product-loop/)

 * 3 replies
 * 3 participants
 * Last reply from: [Mikey Arce](https://wordpress.org/support/users/mikeyarce/)
 * Last activity: [8 years ago](https://wordpress.org/support/topic/simple-shortcode-customization/#post-10324195)
 * Status: resolved