WooCommerce removes custom jQuery codes. I am adding to the product brief.
I am developing an ecommerce site using WordPress + WooCommerce.
I've added buttons for specific products in the Short Description field to quickly select a specific number of products to add to the cart (this is because I have different offers, for example, "Buy 4 for 3").
I have a script as in a generic jquery file:
<script>
function pack4() { document.getElementById("quantity").value = "4"; }
function pack8() { document.getElementById("quantity").value = "8"; }
</script>
And this is some sample code I have in some products. Short description:
<span><strong>4x3 Pack:</strong>TOTAL<strong>$1800</strong></span>
<button class="select" onclick="pack4()">Select</button>
Everything works, and whenever you click on each button, the number of orders adds the corresponding number.
The point is that . When my client (who usually edits products) clicks on the text / visual close of the short description, the code disappears. I think WordPress / WooCommerce has a jQuery filter that erases codes like this. I need this not to be done because the client regularly edits things (and of course they don't know anything about coding). Otherwise, I have to add code every time. onclick="pack4()"
I also suspect that WP / WC is also filtering it without clicking on that text / visual flap (but I could be wrong about that).
Does anyone know what to do?
Thank!
source to share
The easiest and most accurate way is to create your own shortcode like this:
if( !function_exists('display_product_button_pack') ) {
function display_product_button_pack( $atts ) {
// Shortcode Attributes
$atts = shortcode_atts(
array(
'pack' => '4', // default pack is 4
),
$atts,
'button_pack'
);
$output = '<button class="select" onclick="pack'.$atts['pack'].'()">Select</button>';
return $output;
}
add_shortcode( 'button_pack', 'display_product_button_pack' );
}
The code goes in the function.php file of your active child theme (or theme), as well as any plugin file.
The code has been tested and works.
APPLICATION:
Your shortcode has an optional argument , default value ... pack
4
For example, for your package 8, you would enter this into the short description description editor:
[button_pack pack="8"]
This will output this html:
<button class="select" onclick="pack8()">Select</button>
For Pack 4, since the default argument is already 4, you just use this:
[button_pack]
source to share