Question 2174 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How to create custom shortcode for wordpress for products?

i have a card design and is required to create ti as shortcode. But i dont know how can i do this. My card design is here: https://prnt.sc/ElzMofw8Mh-9 . I think shortcode should be php code. Can someone take an example?

Something like this:

[price_box title="Najili Badewannenkissen" patch="Bestes Preis-Leistungs-Verhältnis" price="27,99 €" size="43x41 cm" material="Weiches Hochwertiges Polyestergewebe" rating="5" link="amazon.com" image=“https://medrepublic.de/wp-content/uploads/2022/12/Schlafposition6-e1670856393513.jpg“]
• 4D-Air-Mesh-Technologie und weichem Stoff
• Optimale Unterstützung für Ihren Nacken und Kopf
• Sechs Saugnäpfe halten das Kissen in Position
• Kann problemlos in der Waschmaschine gewaschen werden
[/price_box]
Tags:

2

Answers


  1. 0

    Creating a shortcode on WordPress is basically a PHP function.
    If you don’t already have a child theme, I advise to create one.

    Next step is to create your PHP function in your functions.php file (inside your theme folder).

    After that, you have to "register" / "add" you shortcode with this function : add_shortcode('name_of_shortcode', 'function_name');

    Example : Create a shortcode that displays a simple Hello World

        <?php
function hello_world(){
    return "Hello World";
    }
    add_shortcode('hello', 'hello_world');
?>
    Login or Signup to reply.
  2. 0

    This goes in the editor

    [price_box title="Najili Badewannenkissen" patch="Bestes Preis-Leistungs-Verhältnis" price="27,99 €" size="43×41 cm" material="Weiches Hochwertiges Polyestergewebe" rating="5" link="amazon.com" image="https://medrepublic.de/wp-content/uploads/2022/12/Schlafposition6-e1670856393513.jpg"%5D

    • 4D-Air-Mesh-Technologie und weichem Stoff
    • Optimale Unterstützung für Ihren Nacken und Kopf
    • Sechs Saugnäpfe halten das Kissen in Position
    • Kann problemlos in der Waschmaschine gewaschen werden

    [/price_box]

    This goes in functions.php

    function price_box_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'title' => '',
        'patch' => '',
        'price' => '',
        'size' => '',
        'material' => '',
        'rating' => null,
        'link' => '',
        'image' => ''
    ), $atts );
    
    $starImg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>';
    ?>

    <div class="price-box">
        <div style="display:flex;">
            <div>
                <p><img src="logo-url-here" alt=""><?php echo $a['patch'] ?></p>
                <p><?php echo $a['title'] ?></p>
            </div>
            <img src="<?php echo $a['image'] ?>" alt="">
        </div>
        
        <p>Price: <?php echo $a['price'] ?></p>
        <p>Size: <?php echo $a['size'] ?></p>
        <p>Material: <?php echo $a['material'] ?></p>
        <p>Rating: <?php for($x=1; $x <= $a['rating']; $x++){ echo $starImg; } ?></p>
        
        <div style="display:flex;">
            <p>Highlights:</p>
            <div>
                <?php echo $content; ?>
                <a href="<?php echo $a['link'] ?>">
                    <img src="amazon-logo-link" alt="">
                </a>
            </div>
        </div>
    </div>

    <?php
}
add_shortcode( 'price_box', 'price_box_shortcode' );

    Add all styles to style.css

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search