Product Page Edits: Styling Codes Requested

Hello,

I’m working on some edits for our product page, and can use your help with the following items:

1. Product Page Informational Tabs – we are using the ‘compact’ page design. You will notice the tabs for “additional information”, “shipping” etc, on the right hand side. How do we make it so these tabs default to the close position? When you load the page, the first tab is always open.

2. Share Area (Add Text to right of it) – right below the product tabs, there is the “SHARE” area. We want to add some text to the right of the share button area, like our instagram handle and custom hashtag.

3. FAQ Icon Position – if you look at the product page, you will notice the ( + ) symbol in the FAQ section near the bottom. We want to align this icon on the right hand side.

4. Add To Cart Button – we want to make the button say “ADD TO BAG” instead site wide.

5. Promo Up Banner – we have a link in our TOP BAR MENU area called ‘SUBSCRIBE’. When someone clicks on this, how can we make the PROMO POP BANNER show up?

6. Product Page Scroll- when you look at the product page, it creates an inner scroll window so you have to scroll down slightly see all the product tab area and share button area. We want all the product information to display when the window is loaded without scrolling in this ‘inner box’

7.Border around additional product images – how do we put a gray border around additional product images

8. On the home page, there is background video in the row near the bottom. The sound plays briefly every time the page loads. How do we mute the sound for this permanently?

We appreciate your help. Thanks.

I’m sorry I forgot to include one request:

9.Shipping Display Option – if you look at the screenshot attachment, notice how neat the display for shipping looks. Now, if you compare it with our page, ours looks jumbled. Is there a way for us to clean ours up so it looks neat like the example provided?

Thanks for your help on all items, and sorry for so many requests. We figured it would be best to gather all our questions into one ticket, rather than submitting multiple ones.

Attachments:

You must be logged in to view attached files.

Hello,

You have configured the maintenance mode in the way and we cannot view anything even logged in. I do not see Woocommerce and products in the admin area at all. Deactivate this maintenance mode

Best Regards

Hello, sorry about that. We just gave you admin privileges. You should be able to login now.

Hello,

1. Please add this code to the Theme Settings > Custom JS:

setTimeout(function() {
	var $tab = jQuery('.basel-tab-wrapper').find('a.active');
		$tab.siblings('.wc-tab').hide();
	  $tab.removeClass('active');
}, 10);

2. There is no option to add any text to share buttons area.

3. Add this code to the Theme Settings > Custom CSS > Global:

body .vc_toggle_size_md.vc_toggle_default .vc_toggle_title .vc_toggle_icon{
	left: auto;
	right:10px;
}

4. You can rewrite all theme and plugin texts via PO file in WordPress. Here is a video tutorial that should help you translate your website texts with a Loco Translate plugin https://www.youtube.com/watch?v=D3NsDdMzsls&list=PLMw6W4rAaOgKKv0oexGHzpWBg1imvrval&index=3

We suggest you to keep translated files in wp-content/languages/themes/woodmart-pt_PT.po folder.

5. Add the class basel-open-popup into the menu item http://prntscr.com/mgt6fo to call up a promo popup

6. Add this code to the Theme Settings > Custom CSS > Global:

.product-design-compact .product-image-summary>.row {
    display: block;
}

.product-design-compact .basel-scroll .basel-scroll-content {
    position: static;
}

.product-design-compact .summary-inner.basel-scroll {
    position: static;
}

.product-design-compact .basel-scroll-pane {
display:none!important;
}

7. .Border around additional product images – Add this code to the Theme Settings > Custom CSS > Global:

body .single-product-content .product-images.col-sm-6 .thumbs-position-left .slick-slide {
    padding-bottom: 8px;
    border: 1px solid #000000;
    margin-bottom: 2px;
}

8. I cannot hear any sounds and when the video is on the background it does not reproduce any sounds.

9. Shipping Display Option – I do not see any shipment options at all http://prntscr.com/mgtjg7

Best Regards

Hello, Thanks for your help thus far.

#1 – the code doesn’t work. Can you kindly revise.

#8 – something on the home page makes a sound every-time it loads and then stops immediately. It’s quite loud and consistently does it.

#9 – you had to input an address. We added an attachment below, so you can see how jumbled and messy the section is. Compare it with the earlier image we attached above. We want everything to look neat and structured like the example if possible. Maybe the box area needs to be wider to help accomplish it.

I appreciate your help on all other items. It’s coming together nicely.

Attachments:

You must be logged in to view attached files.

Quick update:

We were able to fix item #9, by using the Booster Plus for WooCommerce plugin.

So we only need helping fixing item #1 – the previous code you provided didn’t work.

And maybe #8, if the background video is causing the sound issue.

I appreciate your help.

Thanks.

Hello,

#1 update the credentials I cannot log in.

#8 deactivate all the plugins and check or replace the video on a background and check if the sound is changing.

Best Regards

Hello, try the new credentials below. Thanks.

Hello,

I have inserted the code in the field “On document ready” and it works now.

Best Regards

thank you for all your help. please close the ticket.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts