Devera Widget Integration in WooCommerce

  1. Include this code in the functions.php file or using the Code Snippets plugin:
    function devera_shortcode() {
    $client = "<your-client-id>";
    $token = "<your-token>";
    $language = ""; /* If you leave it empty it will take the language of the system where it is executed, but you can put es for Spanish, en for English or de is for German */
    if ( ! is_product() ) {
        return '';
    }
    global $product;
    if ( ! $product ) {
        return '';
    }
    $output = '<devera-widget product-id="'.esc_attr($product->get_id()).'" client-id="'.esc_attr($client).'" token="'.esc_attr($token).'" language="'.esc_attr($language).'" ></devera-widget>';
    $output .= '<script src="https://recycling.nastaeco.com/recycling.umd.js"></script>';
return $output;
}
add_shortcode( 'devera', 'devera_shortcode' );

If you do it with Code Snippets:

  • Go to the plugins section and install Code Snippets.

First step code snippets

  • Add a new code snippet

Second step paso code snippets

  • Enter the code here, save and activate everywhere

Third step code snippets

  1. Access to Appearance -> Editor and here Templates -> Woocommerce -> Single Product

First step html block

  • Here we add a block

Second step html block

  • Select custom HTML

Third step html block

  • Enter [devera] in the HTML block, place it as you need and save.

Fourth step html block

  1. If you want to change the styles add to your wordpress these css styles and customize them as you want:
    /* Colors */
--devera-main: #4b858e; /* These are the default hexadecimal heats */
--devera-mainActive: #2c4e54;
--devera-mainDisabled: #9db8bc;
--devera-secondary: #a3d5cd;
--devera-secondaryDark: #9ac6bf;
--devera-secondaryMiddle: #c8e7e2;
--devera-secondaryLight: #e8f6f3;
--devera-secondarySuperDark: #7baaa3;

/* Font */
--devera-font: 'Montserrat', sans-serif;

/* Sizing */
--devera-microMaxWidth: 420px;
--devera-microHeight: 500px;