• English

Integración Widget Devera en WooCommerce

1. Incluir este codigo en el archivo functions.php o mediante el plugin Code Snippets:

   function devera_shortcode() {
       $client = "<your-client-id>";
       $token = "<your-token>";
       $language = ""; /* Si lo dejas vacio cogera el idioma del sistema donde se ejecuta, pero puedes poner es para español, en para inglés o de para alemán */
       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' );
   

Si lo haces con Code Snippets:

• Entra en la seccion de plugins e instala Code Snippets

• Añade un nuevo code snippet

• Introduces aqui el codigo, guardas y activas en todas partes

1. Acceder a Apariencia -> Editor y ahi Plantillas -> Woocommerce -> Producto Individual

• Aqui añadimos un bloque

• Seleccionamos HTML personalizado

• Se introduce [devera] en el bloque HTML, lo colocas como necesites y guardas

1. Si quieres cambiar los estilos añade a tu wordpress estos estilos css y customizalos como quieras:

   /* Colors */
   --devera-main: #4b858e; /* Estos son los calores hexadecimales por defecto */
   --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;