How to add custom button after add to cart button and open product tabs in WordPress
To add a custom button after the Add to Cart button and open product tabs in WordPress, you’ll need to modify your WordPress theme or create a custom plugin. Here’s a step-by-step guide to achieve this:
- Code Snippets: Firstly, you need to install & activate the code snippets plugin. Code snippets can be imported from other sources or exported for backup purposes. This is useful when you want to move your snippets to another WordPress installation. After installation just go to Snippets and Click “Add New”. Then create a Title and Paste this bellow PHP code:
// Add a custom button after the "Add to Cart" button on WooCommerce product pages
add_action('woocommerce_after_add_to_cart_button', 'add_sample_enquiry_button');
function add_sample_enquiry_button() {
echo '<button type="button" id="sample-enquiry-button" class="button alt">Sample Enquiry</button>';
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('li#tab-title-seller_enquiry_form > a, div#tab-seller_enquiry_form > h3').text('Sample Enquiry');
var tabIdToOpen = '#tab-title-seller_enquiry_form'; // Change this to your desired tab ID
$('#sample-enquiry-button').on('click', function() {
// Remove the 'active' class from all tabs
$('.wc-tabs > li').removeClass('active');
$('.woocommerce-Tabs-panel').hide();
// Add 'active' class to the desired tab title
$(tabIdToOpen).addClass('active');
// Show the desired tab panel
$('div#tab-seller_enquiry_form').show();
// Scroll to the tab's position
var tabOffset = $(tabIdToOpen).offset();
if (tabOffset) {
$('html, body').animate({ scrollTop: tabOffset.top }, 500);
}
});
});
</script>
<?php
} 2. After completing this process just click on the “Save Changes and Activate” Button.
3. Then go to your website product page and refresh here. Now you can see the “Sample Enquiry” Button.
For your better understanding just see the YouTube Video:
Note: Please note that the specifics of your WooCommerce and WordPress setup may vary, and the CSS and JavaScript may need further adjustments based on your theme’s structure and other installed plugins. Always make backups before modifying your theme or using custom code to ensure you can recover if something goes wrong.