Requirements for Content Switcher Button in Elementor –
1 – Advanced Custom Field Plugin (Free)
2 – WPcode custom snippet plugin (Free)
Best part about this custom button is that you can choose on which product it can be shown and have different links/URL for different products.
Use the below code in WPcode plugin or in your child theme .
/*PHP to add buton*/
function display_custom_button() {
global $product;
// Check if it's a WooCommerce product and the ACF field is checked
if (is_product() && get_field('enable_custom_button', $product->get_id())) {
// Get the custom URL
$custom_url = get_field('custom_url', $product->get_id());
// Output the button HTML with the right arrow icon from Font Awesome
echo '<a href="' . esc_url($custom_url) . '" class="button custom-url-button"> Custom Button Text <i class="fas fa-arrow-right"></i></a>';
}
}
add_action('woocommerce_after_add_to_cart_button', 'display_custom_button');
display_custom_button – Name of the function (You can name it anything)
enable_custom_button – Name of the True/False ACF field
custom_url – The name of the ACF field for the URL
custom-url-button – CSS class to target this specific button for customization
Custom Button Text – The text that is shown inside the button (You can remove the i class section to remove icon or simply replace it)
If you change the names above then make sure you keep it same in the color coded sections (Example: for green color ones below, keep the text you have chosen same on all 3 parts).
Use the below code to customize the custom button after add to cart. In some cases, theme might be overriding the style. So, simply add ” !important” after the color codes.
If you changed the class in above code (custom-url-button), then make sure to use the same below.
/*CSS to customize the button*/
/*Use !important if your theme is over-riding the below settings*/
.custom-url-button {
background-color: #0073e6;
color: #fff;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
}
.custom-url-button:hover {
background-color: #005baa;
}
Code explanation written with ChatGPT :
This code is for adding a custom button to WooCommerce product pages in WordPress using PHP and styling the button with CSS.
PHP Code Explanation:
function display_custom_button(): This function is defined to display the custom button on the product pages.
global $product;: It makes the $product variable available within the function, assuming that $product is a global variable representing the current WooCommerce product.
if (is_product() && get_field(‘enable_custom_button’, $product->get_id())): Checks if the current page is a product page (is_product()) and if a custom field called ‘enable_custom_button’ is checked for the current product.
$custom_url = get_field(‘custom_url’, $product->get_id());: Retrieves the value of another custom field called ‘custom_url’ for the current product, assuming Advanced Custom Fields (ACF) is being used.
echo ‘<a href=”‘ . esc_url($custom_url) . ‘” class=”button custom-url-button”> Custom Button Text <i class=”fas fa-arrow-right”></i></a>’;: Outputs an HTML anchor (<a>) element with a link to the custom URL. The button has a class ‘button‘ and ‘custom-url-button‘ for styling purposes. It includes the text “Custom Button Text” and an icon from Font Awesome (<i class=”fas fa-arrow-right”></i>).
add_action(‘woocommerce_after_add_to_cart_button’, ‘display_custom_button’);: Hooks the display_custom_button function to the ‘woocommerce_after_add_to_cart_button’ action hook, ensuring that the custom button is displayed after the default WooCommerce “Add to Cart” button.
CSS Code Explanation:
The CSS code is used to style the custom button:
.custom-url-button: Styles the button with a blue background color (#0073e6), white text color (#fff), removes text decoration, adds padding, and gives it a border-radius for rounded corners.
.custom-url-button:hover: Styles the button when hovered over. It changes the background color to a darker blue (#005baa).
Additionally, there is a comment suggesting the use of !important if the theme is overriding the styles. !important is a CSS declaration that gives a rule higher specificity, making it more likely to override other conflicting styles.
In summary, this code adds a custom button to WooCommerce product pages, and the button’s appearance is customized using the provided CSS styles.
