Estoy tratando de duplicar el botón Agregar al carrito de WooCommerce para que pueda mostrarse por segunda vez en la parte inferior de la página de mi producto. Sin embargo, estoy usando un complemento que altera el formulario de agregar al carrito (selecciones de opciones múltiples) y necesito el nuevo botón Agregar al carrito para enviar las opciones seleccionadas también. Tengo el siguiente javascript para duplicar el botón que necesito:

 ( function( $ ) { 'use strict'; $(window).on( 'load', function() { var button = $( $.tcAPI().addToCartButtonSelector ).first(); button.tcClone().addClass( 'custom-add-to-cart-button' ) .on( 'click', function() { button.trigger( 'click' );} ) .appendTo( $('.my-new-button') ); } ); }( window.jQuery ) );

Pero tengo problemas para crear un div con class= "my-new-button" para agregarlo y reemplazarlo con la funcionalidad del botón principal.

En el lugar exacto que quiero que aparezca el botón he usado:

 <div class="my-new-button"> <input type="button" value="Add To Cart" /> </div>

Sin éxito del JS al agregar el div.

Si mi secuencia de comandos es adecuada, ¿cómo debo estructurar el div (u otro) para mostrar el botón que quiero? No estoy muy versado, así que agradezco cualquier consejo. Gracias