Detailed Product Page Alterations

[10foldDigital]

Hi,

Is there anywhere, where I can alter the page contents of the detailed product page, I want to make the following minor changes;

1. Change the ‘quantity’ button and ‘variation’ drop down button to turquoise / slightly rounded to match the rest of the site.
2. The wishlist button appears twice by mistake.
3. Hide ‘select size’, ‘product ratings’ and ‘categories’ text sections.
4. Remove the drop shadow on the main image (the css code below didn’t work on this page or the main products page).
5. Change the image and thumbnail images background colour.
6. Increase the thumbnail images so combined they match the same width as the main image (changing the image size in woocommerce didn’t work, even after regenerating thumbnails).

.woocommerce ul.products li.product figure{
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
box-shadow: none!important;
}

Thanks in advance

[David Martin – Support]

Hi,

1, 2)

.woocommerce .quantity .minus, 
.woocommerce .quantity input.qty, 
.woocommerce .quantity .plus {
	background-color: #1bbeb4;
}
.woocommerce .quantity .qty-plus,
.woocommerce .quantity .qty-minus {
	background-color: #1bbeb4;
}
.woocommerce .quantity .qty {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px!important;
	-moz-border-radius-topleft: 5px!important;
	-moz-border-radius-bottomleft: 5px!important;
	border-top-left-radius: 5px!important;
	border-bottom-left-radius: 5px!important;
}
.woocommerce .quantity .qty-plus {
	-webkit-border-top-right-radius: 5px!important;
	-moz-border-radius-topright: 5px!important;
	border-top-right-radius: 5px!important;
}
.woocommerce .quantity .qty-minus {
	-webkit-border-bottom-right-radius: 5px!important;
	-moz-border-radius-bottomright: 5px!important;
	border-bottom-right-radius: 5px!important;
}
.woocommerce div.product form.cart .variations select {
	background-color: #1bbeb4;
	border-radius: 5px;
}
.woocommerce div.product form.cart .button {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.woocommerce form.cart .yith-wcwl-add-to-wishlist {
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.variations_button .yith-wcwl-add-to-wishlist {
  display: none !important;
}

3) You can hide the label using this:

.woocommerce div.product form.cart .variations td.label label {
    display: none;
}

You cannot hide the categories or product ratings. You would need to hire a web developer to do this.

4)

#product-img-slider .lSSlideWrapper {
  -webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
box-shadow: none!important;
}

5) The background color of an image? You do this before you upload the image.

6) This is not possible to, you would need to hire a web developer to do this.

Thanks.

[10foldDigital]

Hi David,

Thanks so much for the help, they all worked perfectly.

3. Hide ‘select size’, ‘product ratings’ and ‘categories’ text sections.
– You can hide the label using this:

I meant the section that lists the sizes, this has been drawn from the variations drop down, but doesn’t make sense listing them twice, can I hide this section?

5. Change the image and thumbnail images background colour.
– The background color of an image? You do this before you upload the image.

>> Sorry, I didn’t mean the image, I meant the image placement area as each of the images have a transparent background, is this possible to apply a colour?

Also, is it possible to match the arrows, divider line and font weight / colour / mouse over in the variations drop down, quantity button and add to shopping bag / wish list buttons? – see attached screenshot.

Thanks

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

3)

You cannot hide individual items like so, but you can hide all.

To hide all accordions, please use:

div#product-accordion {
    display: none;
}

You can hide the categories:

.single-product span.posted_in {
    display: none;
}

5) Do you mean this:

6) The hover colors can be adjusted for the quantity and wishlist button/icon:

.qty-adjust a:hover,
.woocommerce form.cart button.single_add_to_cart_button:hover,
.yith-wcwl-add-button > a:hover i{
  color: #fff;
}

Divider Line:

.yith-wcwl-add-to-wishlist {
	border-left: 1px solid #fff;
}

[10foldDigital]

Hi David,

Thank you so much for your help, to hide all accordions, the categories and changing the divider colour worked perfectly!

5) Yes, as I wanted the thumbnails shop page products to have a transparent background (see screenshot thumbnails.png), I wanted to apply a background colour to the images on the product detail page (see screenshot product_detail_page.png).

Is this possible?

6) I’m trying to match the font colour and font weight (and icons) of the drop down option, quantity and add to shopping bag button? (See attached match_buttons.jpg).

Is this possible?

Thanks again for your help.

Cheers

Andrew

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Which products can I use as an example, all your lead to a 404 page?

[10foldDigital]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Some setting in your server is causing this. What do you have inside the htaccess file?

-Rui

[10foldDigital]

This reply has been marked as private.

[David Martin – Support]

The one in the root, often you should only have that one. Have you recently used a security plugin on the site? The plugins often add extra htaccess files in various directories that can cause these issues.

[10foldDigital]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Can you paste here the content of those 2 htaccess files?
Or share them in a DropBox url.

-Rui

[10foldDigital]

This reply has been marked as private.

[David Martin – Support]

Make a backup of the file and test using the default WordPress file contents: https://codex.wordpress.org/htaccess

[10foldDigital]

Hi,

I replaced the contents of the htaccess file (WordPress 3.5 and up) but now the navigation links are broken.
Is this the correct one?

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]

# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ – [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]

Thanks

Andrew