Website display Customizations

[Crispus]

I have a couple of issues involving customizing the display of certain details on the website.

1. I would like the green global banner to be displayed on the homepage only and not on every page. I would also like the background color changed from green to black with white texts.
2. I Would like to limit the number of social media icons displayed on the website. I only use 6 (Facebook, Twitter, Instagram, Youtube, Pinterest and Linkedin) so I would like to display their icons only on the top bar menu right section. I would like them to be white in color.
3. I would like the main menu bar background to be black in color with the white text. The drop-down menus should be white in color though with black text.
4. I would like the product information displayed on the shop page changed. I would like to replace the product name with “Designer/Brand name”, to replace the category with the product name and finally price. This is shown in the 1st photo titled, “shop product page”. This will mean removing the category part from the product display. I would also like the number of product in stock not to be displayed on a variable product page when one is choosing an option.
5. I would like to remove the menu breadcrumbs displayed on an individual product page immediately above the product name and price. I would also like the product description to be separated and grouped according to Details, Size & Fit and color options. This is shown in the 2nd photo titled “Fotor created”. This can be seen on the Net-a-Porter website here, https://www.net-a-porter.com/ke/en/d/Shop/Clothing/All?cm_sp=topnav-_-clothing-_-topbar&pn=1&npp=60&image_view=product&dScroll=0
6. I would like the additional information section to be removed completely from each and every product page as it is just a repetition of the product description. This is shown in the last photo, titled, “remove”
7. I would like the “Complete the look” section to be displayed on each and every product page as displayed on this product page, “http://www.attirevazi.com/shop/padded-jacket/” This is shown in the 3rd photo titled “Dream product display”

I have tried fixing these issues myself but I am afraid to mess up the code and destroy the whole website. I will be really grateful. Thank you.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) Please follow this:

Theme Options => Global Header Banner Options => On

Then add this CSS and update the page ID number to match the one for the page you want to show (page id can be found with the body html tag):

#sf-header-banner { display: none; }
.page-id-12376 #sf-header-banner {
    display: block;
}

2) You can limit the output in with the shortcode: [social type="Facebook, Twitter, Instagram, Youtube, Pinterest ,Linkedin"]

3) You can set the color from within Color Customizer => Color – Header and Color Customizer => Color – Navigation.

4) You would need to hire a developer to do this for you.

5) To remove the single product breadcrumbs, please use this:

.summary-top .woocommerce-breadcrumb {
    display: none;
}

For the other modifications you will need to hire a developer to do this for you.

6) Please add a screenshot for this, I am not sure what your refer to.

7) Complete the look needs to be setup within each product page.

Thanks.

[Crispus]

Thank you for the reply. I however don’t know where to put the codes. Could you please direct me to where I should input the codes you’ve provided. I don’t want to make a mistake and mess everything up. Please help. Thank you.

[David Martin – Support]

CSS will go in Theme Options => Custom CSS.

Thanks.