Return to previous page

Changes to the single product page (alignemnt and social share)

This topic has 20 replies, 3 voices, and was last updated 1 years, 9 months ago ago by Inesita

Inesita

Participant

February 23, 2023 at 13:55

Hi!
I would like to include the sharing option of instagram, but did not find this platform in the options. Can you help?
Also in the bottom where the recently viewed items are, I would like to align the bottom buttons. Is this possible?
Thanks for your help, as always,
Inés
https://postimg.cc/Sj7cKY3k

#347821 Copied Theme version: 9.0.3 WooCommerce version: 7.4.0

19 Answers

Inesita

Participant

February 23, 2023 at 13:59

And I forgot: at the top header bar the social icons appear in pink not like in the rest of the web page in white. Why is that? Do I have 2 headers somewhere…??

#347822 Copied

Andrew Mitchell

Support staff

February 23, 2023 at 20:20

Hello,
to include the sharing option of Instagram, you need to go to the following settings: Customizer -> Single product builder -> Sharing -> Elements (https://prnt.sc/6lw1MaCv9jbn) and select the options you need.
To resolve the issue with the buttons on the products, we need a link to such a product.
To resolve the issue with the header, please provide the admin.

Best Regards,
8Theme’s Team.

#347847 Copied

Inesita

Participant

February 23, 2023 at 21:11

Hi Andrew!
thanks for your reply.
Regarding the sharing option of Instagram, I proceeded exactly as you described in your mail, but there is no instagram option on my side.

Link to a product: https://postimg.cc/gallery/GD1gQTM Please note that in order to see the buttons you have to hoover over them if not, they are not visible right now. No clue why!

Admin provided

Please contact administrator
for this information.

#347849 Copied

Andrew Mitchell

Support staff

February 24, 2023 at 14:30

Hello,

1) Unfortunately, it is currently not possible to create a share button for Instagram as it is blocked by Instagram itself.
https://warfareplugins.com/support/instagram-sharing-button/
https://www.healthhosts.com/no-social-share-button-for-instagram-why-is-that/

At this time, there may only be a button to transition to the Instagram profile.

2) To change the button’s alignment, you can use the following custom CSS for the element:
.wp-element-button{
float: left;
}
Specifically, the values float: left; and float: right;

https://prnt.sc/AmE-qZ8d97cW

To revert back to the default value, remove the custom CSS.

3) We have resolved the “Header” issue, it was style conflicts between the theme and the Elementor.

4) You need to use a translation tool to translate this text found here: https://prnt.sc/jgSlgLK-kBeo

5) In order to resolve this issue(https://prnt.sc/mDvyOj4RGf-R), we require FTP access.

Best Regards,
8Theme’s Team.

#347907 Copied

Inesita

Participant

February 24, 2023 at 14:53

Hi Andrew!
Thanks for your replies.
#2 : Can you please help me to get to this element. It is so confusing : I don’t know where to edit it… 🙁 And can you also help me inchanging the colors of the buttons so that they are visible when not hoovering?

#5 I see you resolved the issue already. There is just a spelling mistake: it should read: adreces not adreças

There would be just one more thing left (on the second screeshot) the blue bar https://postimg.cc/gallery/GD1gQTM

#347911 Copied

Andrew Mitchell

Support staff

February 25, 2023 at 15:16

Hello,

#2 We would be delighted to provide you with a video tutorial on how to edit it, which can be found in the private content area.

#5 We have fixed the issue, as shown in the screenshot below:
https://prnt.sc/wF5KcRYHtnHo

Best Regards,
8Theme’s Team

Please contact administrator
for this information.

#347990 Copied

Inesita

Participant

February 26, 2023 at 14:22

Hi Andrew!
1)Thanks for the video. By deleting this part of code I get now the buttons aligned in the center (that’s what I wanted) but the initial whish that they should be aligned at the bottom I still could not achieve. Please see the attached image.
https://postimg.cc/8FDjfQtS
2) I see that you fixed the color problem of the buttons, but now there is no difference between them on normal and hoover state. Can we change that?
Normally the buttons on my page are green (#89c8c8) with white text and change to pink (#e9aea8) with white text on hoover. Is there a global (and easy) way to do it? As I see that the same problem appears in other parts of the web and I’ll need to open cases for the same on the shop, my account, etc. pages.

#348118 Copied

Rose Tyler

Support staff

February 26, 2023 at 16:15

Hello, Inesita,

1/ Please provide URL of the page from which the screenshot was done.

2/ We would recommend you check the settings for buttons in Theme Options > Styling, and set colors for all types of buttons.

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Kind Regards,
8theme team

#348124 Copied

Inesita

Participant

February 26, 2023 at 23:10

Hi Rose!
1) This screenshot was taken from the “my account” page.
2) The problem is that even though I configure the button styling in the styling section, the buttons don’t apply the changes on the front end. The same issue applies to blocks in the shop page and under the single product pages. How can I make that the general settings in the styling area apply to the buttons in the blocks?

Please contact administrator
for this information.

#348134 Copied

Rose Tyler

Support staff

February 27, 2023 at 11:21

Hello, Inesita,

Unfortunately, we are unable to log in. Please verify and provide us with the correct wp-admin access.

Kind Regards,
8theme team

#348168 Copied

Inesita

Participant

February 27, 2023 at 11:53

Please try again!

Please contact administrator
for this information.

#348172 Copied

Rose Tyler

Support staff

February 27, 2023 at 13:21

Hello, Inesita,

About buttons, we’ve set colors in Theme Options > Styling, you can check your Shop page now https://prnt.sc/X44Jg0pk0UTf
About the Single product page, please edit the settings of buttons via Single Product Builder > Add to cart settings – https://prnt.sc/Gr3MDPT3Ei2E

Kind Regards,
8theme team

#348186 Copied
Rose Tyler

Support staff

February 27, 2023 at 16:52
Hello, Inesita,

For buttons on the My account page, you can try the next code:
```
@media only screen and (min-width: 1200px) {
.swiper-container .product-slide,
.product-slide .product, .product-slide .content-product {
height: 100%;
}
.product-slide .content-product {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.product-slide .product-image-wrapper {
    width: 100%;
}
.product-slide .product-details {
    align-self: flex-end;
    padding-bottom: 0;
}
}
```
Kind Regards,
8theme team
#348226 Copied
Inesita

Participant

February 28, 2023 at 17:17

Hi Rose!
Thanks for your replies (as usual!)
Now the buttons look more like what I wanted…
There are still a couple of things open, and as they were raised initially in this conversation or are related to it, I’ll post them here. But if you feel they should be raised seperately, I’ll gladly separate them and open new cases for them, just let me know!
#1My account page: With the recent changes, something colleague Andrew did initially disappeared: next to the globe there should read: “Adreces”
https://postimg.cc/RW9RH4vS
#2 My account page: Is it possible to align the buttons of not variable and variable items?
https://postimg.cc/gxJx5TDy
#3 On the Single product page I wanted to change the look of the buttons that appear in the bottom “recently viewed items area” not on the single product area itself. With your changes the only thing I would need to adjust now, is that they differ when on hoover. Where can I do it? and align the buttons to the bottom: https://postimg.cc/CdYgPfMS

#348378 Copied
Rose Tyler

Support staff

March 1, 2023 at 09:37
Hello, Inesita,

Thank you for the reply.

1/ We have encountered this issue with one of our customers, and it is not related to our theme. You will experience the same issue even with the default WooCommerce theme, Storefront, activated. We recommend that you contact the support team of the WooCommerce plugin to resolve this issue – https://wordpress.org/support/plugin/woocommerce/ . We would be grateful if you could share their solution here as well.

2/ This code https://prnt.sc/S3SNc21t8FPU should give the next result – https://prnt.sc/-i6RuTd5k4hw

3/ Add this code also to the previous one
```
.swiper-container {
    display: flex;
    align-items: stretch;
}
.swiper-wrapper {
    height: auto;
}
```
Kind Regards,
8theme team
#348445 Copied
Inesita

Participant

March 2, 2023 at 19:03

Hi Rose!
thanks for your reply!
1) will do!
2) worked like a charm.
3) I do not see the buttons aligned on the bottom nor changing their color on hoover (from light green to dark like the others) https://postimg.cc/CdYgPfMS

Please advice!

#348646 Copied

Inesita

Participant

March 3, 2023 at 11:57

Hi Rose!
regarding #1: I received answer regarding the Woocommerce issue: it is a bug as you can see here:
https://github.com/woocommerce/woocommerce/issues/36490
I have subscribed to the news and if it gets solved any time soon I’ll let you know. In case you know about a workaround, I’ll be happy to implement.
Best regards,
Inés

#348709 Copied

Rose Tyler

Support staff

March 3, 2023 at 12:11

Hello, Inesita,

Please check now. We’ve changed the previous custom CSS code.

Kind Regards,
8theme team

#348711 Copied

Inesita

Participant

March 3, 2023 at 12:19

Top! Thank you SO much!

#348712 Copied
Tagged: alignment, optimization, single-product page, social share, templates, woocommerce, wordpress
Viewing 20 results - 1 through 20 (of 20 total)

The issue related to '‘Changes to the single product page (alignemnt and social share)’' has been successfully resolved, and the topic is now closed for further responses

Changes to the single product page (alignemnt and social share)

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection