Scoial Share on pages

I have seen the social share on the renew agency demo () and want to add this to pages and products on my site, how do I do this? I want to add it to the page in a component which is added to all products

Hi Simon,

Thank you for the inquiry.

The social share section is unique to the Renew Agency demo, so you won’t be able to use it directly without importing the demo. However, you can easily recreate it using the Social element and the Flexbox layout option. Please refer to the documentation below:

https://theme.co/docs/social
https://theme.co/docs/use-flex-layout

Let us know if you need more info.

Best regards,
Ismael

Thank you. I’ve now created a row of 4 icons. I wanted Whatsapp to be one of the 4, this isn’t an option in the dropdown within the social element, is this possible. I then want to add the row of social icons to the product page via shortcode, but I can’t seem to do this

Hi @simonwr1976,

You can add the social share icons using the Social element as described by my colleague. But, unfortunately WhatsApp icon is not available in the list. You can use the Image option instead og Icon option and upload a custom image for WhatsApp.

image

Hope it helps.
Thanks

ok thanks. But in the share list whatsapp isn’t an option, what should I choose there?

Thank you for the update.

As suggested above, you can switch Graphic > Type from Icon to Image , then look for the Primary Graphic Image section and upload your own whatsapp icon image.

Let us know if you need more info.

Best regards.

Thanks, I think I get that bit. In the previous screen shot I’ve sent I was trying to highlight the behavior section. I have selected share, but whatsapp isn’t in the dropdown, what should i do here?

Please look for the Primary Graphic Image section after toggling the Graphic > Type settings – screenshot below – and upload your own whatsapp image there.

Feel free to reach out if anything is unclear or needs clarification.

ok, thanks. i’ve added the whatsapp graphic image and the secondary graphic image and this is working fine. But in the behvior section i have selected facebook, so when the user clicks on the button it opens facebook, what should I choose in the behavior section??

Thank you for the update.

Since the icon whatsapp is not available by default, you may need to use the Link type in the Behavior settings, then place the wa link in the provided field. This might help: https://faq.whatsapp.com/5913398998672934

Warm regards.

ok great thanks.

I have created this section as a component at the moment. I now want to add this to my product page. I have tried export the component, but haven’t been able to manage this, please advise how I do this

Hello @simonwr1976,

If you are using the Pro theme in your site, you may need to edit your custom Woo Single layout for the products and then you can insert the component that you have created. If you are using the X theme, a custom PHP may be needed to insert the component shortcode into the product layout.

We would love to check your site if we can log in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

added the details on secure note

Hello @simonwr1976,

You have created the Component. You did not exported it. Please check out this Youtube video to know more about how you can export and re use the component you have created.


https://www.youtube.com/watch?v=Ke8AdlYaY7Y

Kindly let us know how it goes.

Thanks for the reply, but the issue that I’m having is that ‘export component’ is greyed out and so I can’t export it

Hello @simonwr1976,

You must first edit the label of the container element:
image

Once it has the custom label, you can then export the component.

Cheers.

great thanks. I’ve how exported them and added them to my product template and added them to a text element, but now they’re stacked when I want the to be on one line? https://wordpress-1368127-5047106.cloudwaysapps.com/product/abraham-cart/

Thank you for the update.

Looks like you exported each social icon separately. We reversed this and exported the entire div containing the Icon elements instead, so you don’t have to copy the component shortcode manually. You can simply use the Social Share component from the Elements library. Please make sure to purge the cache before checking the product page.

Warm regards.

great, thanks for your help

You are most welcome, @simonwr1976.