Return to previous page

Demo Button for Digital Products on xStore Theme

This topic has 10 replies, 2 voices, and was last updated 3 months, 1 weeks ago ago by Jack Richardson

Vijith

Participant

September 8, 2024 at 03:56

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 ‘

‘;
woocommerce_wp_text_input (array (
‘id’ => ‘demo_url’,
‘value’ => get_post_meta (get_the_ID(), ‘demo_url’, true),
‘label’ => ‘Demo URL’,
‘description’ => ‘The button link’
));
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);

Files is visible for topic creator and
support staff only.

#413490 Copied Theme version: 9.4.0

9 Answers
Jack Richardson

Support staff

September 9, 2024 at 10:29
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
#413644 Copied
Vijith

Participant

September 9, 2024 at 14:29

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/

Files is visible for topic creator and
support staff only.

#413701 Copied

Jack Richardson

Support staff

September 9, 2024 at 15:25

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

Please contact administrator
for this information.

#413715 Copied

Vijith

Participant

September 9, 2024 at 15:55

Hi Jack,

Above provided video is for the CART page. My reqeuest for was regarding the “DEMO” button on the Single Product Page.

#413730 Copied

Jack Richardson

Support staff

September 9, 2024 at 16:20

Hello @Vijith

Sorry, the link previously sent was incorrect.
The correct one is attached below in private area.

Kind regards, Jack Richardson

Please contact administrator
for this information.

#413735 Copied

Vijith

Participant

September 9, 2024 at 16:28

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.

#413737 Copied

Jack Richardson

Support staff

September 10, 2024 at 07:23

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

#413770 Copied

Vijith

Participant

September 10, 2024 at 19:51

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.

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#413891 Copied

Jack Richardson

Support staff

September 11, 2024 at 10:11

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

#413936 Copied
Tagged: demo button woocommerce xstore theme, demo feature xstore woocommerce, digital products demo button, woocommerce xstore demo button, wordpress templates xstore demo, xstore theme digital product preview
Viewing 10 results - 1 through 10 (of 10 total)