This topic has 10 replies, 2 voices, and was last updated 1 months, 3 weeks ago ago by Jack Richardson
Hi,
I would like to implement the theme for my Digital Product Selling website and tried the same on my Staging site. [Added below code to the Functions.php of theme file to achive / get the demo button] – Demo URL is available in the WooCommerce Product Advanced Tab.
But, I would like to format the button. [may be you have a better option to just place a standard xStore button and pull the URL from my woocommerce product advance tab] – Please advise.
/**
* Snippet Name: WooCommerce Custom Product Data Metabox For Custom Button Link
* Snippet Author: ecommercehints.com
*/
add_action (‘woocommerce_product_options_advanced’, ‘ecommercehints_product_data_metabox’);
function ecommercehints_product_data_metabox() {
echo ‘
‘;
}
add_action (‘woocommerce_process_product_meta’, ‘ecommercehints_save_field_on_update’, 10, 2);
function ecommercehints_save_field_on_update ($id, $post) {
update_post_meta ($id, ‘demo_url’, $_POST[‘demo_url’]);
}
function ecommercehints_content_after_add_to_cart_form() {
global $product;
$demo_url = $product->get_meta (‘demo_url’);
echo ‘View Demo‘;
};
add_action (‘woocommerce_after_add_to_cart_form’, ‘ecommercehints_content_after_add_to_cart_form’, 10, 0);
Dear @Vijith,
We hope this message finds you well. We would like to provide you with the necessary steps to customize the “Demo” button on your eCommerce platform. Please follow the instructions below:
1. Modify the following function named “ecommercehints_content_after_add_to_cart_form” into your child-theme/functions.php file:
function ecommercehints_content_after_add_to_cart_form() {
global $product;
$demo_url = $product->get_meta('demo_url');
echo 'View Demo';
}
2. To modify the appearance of the button, you may adjust the classes as follows:
– For color variations, replace “active” with any of the following: “black”, “light”, or “bordered”.
– For size variations, replace “medium” with either “small” or “big”.
In such case the button will be styled from your Theme Options -> Styling -> Buttons. If you prefer to have some unique styles, you can add own custom class for the button and write the CSS styles just for the demo button displayed.
Please note that additional customization beyond these instructions falls outside the scope of our standard support services. Should you require further customizations, we kindly ask you to submit your requests through the appropriate channel provided by our team.
Thank you for your understanding and cooperation.
Best Regards,
Jack Richardson
The 8Theme Team
Hello Jack,
Thank you for your support – I tried modifying the function with the provided code. However, the button appeared without any styling and Link URL.
However, can you please elobrate on this? Where do I find this options?
https://www.8theme.com/topic-tag/digital-products-demo-button/
Dear @Vijith,
I hope this message finds you well.
Could you kindly review the video located in the private area? We have observed that there are no apparent issues with broken styles or other visual discrepancies in your custom snippet. This leads us to believe that you might be viewing a cached version of the page. We recommend clearing your browser cache to view the most recent example as demonstrated in the video provided.
Should you have any further questions or require additional clarification, please do not hesitate to provide a detailed description along with screenshots.
Best Regards,
Jack Richardson
The 8Theme Team
Hi Jack,
Above provided video is for the CART page. My reqeuest for was regarding the “DEMO” button on the Single Product Page.
Hello @Vijith
Sorry, the link previously sent was incorrect.
The correct one is attached below in private area.
Kind regards, Jack Richardson
Hi Jack,
Sorry, May be I was not clear about the request.
I get this button by default when I added the original code to Functions.php.
However, I am not able to arrange the Add to Cart & Demo Link button side by side OR both button Stretched.
The most recommended is to have the buttons side by side.
Appreciate if you could help me on this – Thanks.
Dear @Vijith,
I hope this message finds you well. We regret to inform you that we currently do not have access to your staging website neither WP-ADMIN nor FTP. Consequently, we are only able to offer suggestions for improvements.
We recommend that you modify the existing code snippet from:
add_action ('woocommerce_after_add_to_cart_form', 'ecommercehints_content_after_add_to_cart_form', 10, 0);
to:
add_action ('woocommerce_after_add_to_cart_button', 'ecommercehints_content_after_add_to_cart_form', 10, 0);
This change should position your custom button adjacent to the ‘Add to Cart’ button, similar to the ‘Buy Now’ button placement in our demos, which you can view here: https://xstore.8theme.com/elementor/demos/niche-market02/product/wooden-classical-golden-chairs/.
Additionally, if you are interested in incorporating an ‘OR’ separator, you may want to examine the etheme_buy_now_btn
function located in xstore/framework/woo.php
. Should you choose to implement this on your own and possess proficient PHP skills, you will likely be able to analyze the suggested function and extract the necessary code segments, particularly the next part of code (https://prnt.sc/kd4RbTWSgG1R);
We trust you will find these suggestions helpful. Should you require further assistance or have any questions, please do not hesitate to contact us.
Best Regards,
Jack Richardson
The 8Theme Team
Hello Jack,
Thank you for your support. Attached is the output of the button.
And futher, I have provided the admin user credentials incase if you wanted to give a try.
Dear @Vijith,
I hope this message finds you well. I would like to inform you that our support services strictly adhere to Envato’s policy, which specifies the scope of assistance we can offer to our customers. Unfortunately, this means we are unable to provide unique customizations directly through our support channel.
For a detailed understanding of what is included, please refer to the Envato support policy available at: https://themeforest.net/page/item_support_policy.
We have provided you with the most relevant information and suggestions that you might consider implementing. However, if you find these suggestions challenging to implement on your own, we encourage you to submit a request for additional customization. You can do so by visiting the following link: https://www.8theme.com/account/#etheme_customization_panel.
Thank you for your understanding and adherence to the support guidelines.
Best Regards,
Jack Richardson
The 8Theme Team
You must be logged in to reply to this topic.Log in/Sign up