General

Wordpress itself is an open source CSM with a vivid plugin landscape. There are different plugins to add shopping cart functionality to Wordpress like WooCommerce, wpShopGermany and ecwid.
This documentation is only about the integration of Trusted Shops in WooCommerce and WooCommerce Germanized, the steps described below are identical for both.

1. How to integrate without plugin (Same instructions for WooCommerce and WooCommerce Germanized)

We have already tested this in our Test shops (We have tested with WooCommerce Version 9.3.3) ! But You can customize the code for your store yourself if required.

1.1 How to integrate the JavaScript of the Trustbadge

Get Trustbadge code here: https://help.etrusted.com/hc/en-gb/articles/360047444811-How-can-I-integrate-the-Trustbadge-in-my-shop-without-a-plugin-
Replace TS-ID in the Trustbadge code
Add the code to your themes footer before the closing tag . Unless using a self developed theme it is advised to add the code into a child-theme
For example: /basepath/wordpress/wp-content/themes/YOUR-CHILD-THEME/footer.php

1.2 Define data transfer for service without product Data (Use this option if you only use Service Reviews and did not book Product Reviews)

To do this you need to edit the file: thankyou.php
This file is located in: wp-content/plugins/woocommerce/templates/checkout/thankyou.php

In that file, locate the code line:

<?php wc_get_template( 'checkout/order-received.php', array( 'order' => $order ) ); ?>

After that line, insert the following code:

<!-- Trusted Shops Guarantee Card integration - Start  -->
<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr"><?php echo $order->get_order_number(); ?></span>
<span id="tsCheckoutBuyerEmail"><?php echo $order->get_billing_email(); ?></span>
<span id="tsCheckoutOrderAmount"><?php echo $order->get_total(); ?></span>
<span id="tsCheckoutOrderCurrency"><?php echo $order->get_currency(); ?></span>
<span id="tsCheckoutOrderPaymentType"><?php echo $order->get_payment_method_title(); ?></span>
</div>
<!-- Trusted Shops Guarantee Card integration - END -->

This is how it looks integrated (Screenshot):

Code example

To not lose the modifications due to an update, they should be done in a child-theme.
For example: wp-content/themes/YOUR-CHILD-THEME/woocommerce/checkout/thankyou.php

It may occur that you see "deprecated" warnings in the tags instead of the actual values.
This article describes a possible solution for that: Woocommerce-Plugin doesn't work because of deprecated warnings

1.3 Define data transfer for service and product reviews

<!-- Trusted Shops Integration -->
    <div id="trustedShopsCheckout" style="display: none;">
        <span id="tsCheckoutOrderNr"><?php echo $order->get_order_number(); ?></span>
        <span id="tsCheckoutBuyerEmail"><?php echo $order->get_billing_email(); ?></span>
        <span id="tsCheckoutOrderAmount"><?php echo $order->get_total(); ?></span>
        <span id="tsCheckoutOrderCurrency"><?php echo $order->get_currency(); ?></span>
        <span id="tsCheckoutOrderPaymentType"><?php echo $order->get_payment_method_title(); ?></span>
 
    <?php
    foreach ( $order->get_items() as $item_id => $item ) {
        $product = apply_filters( 'woocommerce_order_item_product', $item->get_product(), $item );
        $tsproduct = wc_get_product( $item['product_id'] );
        echo '<span class="tsCheckoutProductItem">
        <span class="tsCheckoutProductUrl">'.get_permalink($item['product_id']).'</span>
        <span class="tsCheckoutProductImageUrl">'.get_the_post_thumbnail_url( $tsproduct->get_id(), 'full' ).'</span>
        <span class="tsCheckoutProductName">'.$item['name'].'</span>
        <span class="tsCheckoutProductSKU">'.$tsproduct->get_sku().'</span>
        <span class="tsCheckoutProductGTIN"></span>
        </span>';
        echo "<br>";
    }
    ?>
    </div>
<!-- Trusted Shops Integration END -->

2. How to integrate widgets

Widgets are used to display reviews and stars in your shop frontend.

Each widget has its own widget ID. You can find your Widget's ID in your eTrusted Control Center under:
Reviews / Marketing / Widgets

You can see here how the widgets look like in your shop after the integration is done:
How do widgets look like on my website?

2.1 How to integrate the eTrusted bootstrap tag in the head section of your shop

The eTrusted bootstrap tag is used to load the JavaScript code needed to handle all the eTrusted Widgets in your shop.

Paste the following code into the head section of your website:

theme: /StoreRoot/wp-content/themes/OWN-THEME/header.php or in case of child theme: /StoreRoot/wp-content/themes/OWN-THEME-child/header.php

<!-- Begin eTrusted bootstrap tag -->
<script src="https://integrations.etrusted.com/applications/widget.js/v2" defer async></script>
<!-- End eTrusted bootstrap tag -->

This is how it looks integrated (Screenshot):

Code example

Note:

There are other alternative options to do this.

Option 1: Change functions.php file inside your child-theme to include the script. This documentation is intended for developers.

Option 2: Use a plugin to add the script to the header. For example https://wordpress.org/plugins/insert-headers-and-footers/

2.2 Review Carousel widget embedding

In order to integrate the Review Carousel widget, you need to edit the footer.php file.
This file is located under /StoreRoot/wp-content/themes/OWN-THEME/footer.php

or in case of child theme: /StoreRoot/wp-content/themes/OWN-THEME-child/footer.php

Do not forget to replace YOUR-WIDGET-ID with the dedicated widget ID

Note: You can place that code before the following line:

<!-- Begin eTrusted widget tag -->
<etrusted-widget data-etrusted-widget-id="YOUR-WIDGET-ID"></etrusted-widget>
<!-- End eTrusted widget tag -->

With that integration, the Reviews will be displayed in the footer of you shop. You can place the code in a different position to display it elsewhere

2.3 Product review widgets embedding

2.3.1 Full Review List widget embedding (on product page)

Copy the following code and paste it into the body of your website where you want the widget to appear, for example:

theme: /StoreRoot/wp-content/plugins/woocommerce/templates/content-single-product.php

or in case of child theme: /StoreRoot/wp-content/themes/OWN-THEME-child/woocommerce/templates/content-single-product.php

We suggest to insert the code at the bottom of the file (For example after all the code).
Do not forget to replace YOUR-WIDGET-ID with the dedicated widget ID

<!-- Begin eTrusted widget tag -->
<etrusted-widget data-etrusted-widget-id="YOUR-WIDGET-ID" data-sku="<?php echo $product->get_sku(); ?>"></etrusted-widget>
<!-- End eTrusted widget tag -->

Note: In case the variable for the sku isn't working or crashes the frontend, check if the snippet is defined in the file. If not, add it just before the widget code !

2.3.2 Product Mini Stars widget embedding (Widget extensions)

The Full Review List widget has additional extensions that you can use to display the product review stars.

With the following code, you can include Review stars that links to the main widget anywhere on the product page (must be on the same page). For example, you can jump from a short rating next to the product directly to a detailed description further down on your product page.

For example insert this code under the product title:

theme: /StoreRoot/wp-content/plugins/woocommerce/templates/single-product/title.php

or in case of child theme: /StoreRoot/wp-content/themes/OWN-THEME-child/woocommerce/templates/single-product/title.php

We suggest to insert the code directly after the code line:

<!-- Begin eTrusted product-star tag -->
<etrusted-product-review-list-widget-product-star-extension></etrusted-product-review-list-widget-product-star-extension>
<!-- End eTrusted product-star tag -->

2.4 Product Mini Stars widget embedding (on category page)

In order to integrate the Product Review widget on product category pages, you need to adapt the file /wp-content/plugins/woocommerce/templates/content-product.php
Insert the following code after the line: do_action( 'woocommerce_shop_loop_item_title' );
Do not forget to replace YOUR-WIDGET-ID with the dedicated widget ID

echo '<script src="https://integrations.etrusted.com/applications/widget.js/v2" async defer></script>';
    $sku ="";
         if (!empty($product->get_children())) {
            $count = count($product->get_children());
            $counter = 0;
            $sku = "";
            while ($counter < $count) {
                $variation_product = wc_get_product($product->get_children()[$counter]);
                $variant_product_data = json_decode($variation_product, true);
               if($counter===$count-1){
                    $sku .=  $variant_product_data["sku"];
               }else {
                    $sku .=  $variant_product_data["sku"].",";
               }
                $counter++;
            }
        } else {
            $sku = $product->get_data()["sku"];
        }      
echo '<etrusted-widget data-etrusted-widget-id="YOUR-WIDGET-ID" data-sku="'. $sku.'"></etrusted-widget>';