Webshop questions - by irish - on WordPress WooCommerce support

This topic has 58 replies, 5 voices, and was last updated 7 years, 5 months ago ago by Rose Tyler

  • Avatar: irish
    irish
    Participant
    March 22, 2016 at 12:45

    Hello

    I’ve some question about the webshop (see private description).

    1) Why is the header so big? http://screencast.com/t/YQMvDHDSZM
    – how can i make the header background a little transparent?
    2) How can i set the header fonts (H1, H2 H3 etc.) in another font? In 8Theme options i only see 6 options, but not the option to other Google fonts.

    Please, contact administrator
    for this information.
    57 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    March 22, 2016 at 16:19

    Hello,

    1. Sorry, but you can’t make header transparent because there is no content behind it.
    To make it smaller add this code in Global Custom CSS:

    .content-page, .page-content {
        margin-top: 0px;
    }

    2. If you want to add custom fonts you need import them as described in the article http://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/
    Then add the code in Global Custom CSS:

    h1, h2, h3 {
      font-family: write_your_font;
    }

    Best regards,
    Jack Richardson.

    Avatar: irish
    irish
    Participant
    March 22, 2016 at 16:43

    hi Jack!

    Thanks for your response,

    1) Unfortunately this didn;t worked. Any other idea?
    2) Where can i change the top-menu (items like newsletter, my account etc.)? I don’t see any widget
    3) Where can i change the footer? I see the tutorial video but i don’t have Visual Composer in Static Blocks?
    And i already have a footer on my website but i can’t see the widgets anywhere to change?
    How can i change the bottom footer with the payment logo’s?

    4) How can i add a table in a custom tab by a product like: http://www.puro-dogfood.com/product/puro-croc-2420/ under “voedingschema”?

    5) Where can i add the categorie header in the shop?

    6) In a single product page, there is a tab called: Delivery and returns. How can i change this?

    Avatar: Eva
    Eva Kemp
    Support staff
    March 23, 2016 at 12:00

    Hello,

    1. You made a mistake when copying the code. I’ve edited it. Check the site now.

    2. You can add your own links in Appearance > Widgets > Right Side top bar area.
    Please clarify how you want to edit the current links.

    3. To enable VC editor for static blocks go to wp admin panel > Visual Composer > Role Manager > Post Types > Custom > tick “static blocks” and other sections where you want to use VC editor.

    To edit footer you have to recreate it in static blocks as described in the documentation https://www.8theme.com/demo/docs/woopress/#!/0_footer .

    4. You need use html tags to create table. Refer to this article http://www.w3schools.com/html/html_tables.asp . Also you can search in google how to create table in html.

    5. To add some content in category page go to Products > Categories > edit a category > write your content in “Category Header” section.

    6. Go to Theme Options > Single Product Page > Custom Tab Title.

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    March 23, 2016 at 13:44

    Hi Eva,

    Thanks for your great support!

    Other question:

    1) how can i change the colors at the “add to cart” button in the shop-page (not the single product page) + Is it possible to have a border or something so it’s more catchy?

    2) how can i change the color of the product titles in de shop page? Now they are blue.
    Looks like that all links of the website are blue.

    3) On the shop page, i have a price filter in the sidebar. Where can i change the color of this text? Now it’s black text on black background.

    4) When you scroll down, the menu items are going to be very small. Hoe can i fix this?

    Avatar: Eva
    Eva Kemp
    Support staff
    March 23, 2016 at 14:41

    Hello,

    1. Please add this code in Global Custom CSS:

    .etheme_add_to_cart_button.product_type_simple {
        color: red;
        background-color: yellow;
        border: 1px solid red;
    }

    Use your color values.

    2. Use this css code:

    .products-grid .product-title a {
        color: yellow !important;
    }

    3. Add the following css code:

    .price_slider_wrapper .price_slider_amount button {
       color: white;
    }

    4. Use this code:

    .fixed-header-area .menu > li > a {
       font-size: 18px !important;
    }

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    March 23, 2016 at 20:44

    Woah Eva, thank you so much! Must say, this is the first time that i’m using this theme but i really love your support! I’m going to make a lot more shops with this theme, thanks!

    But stil keep having questions, sorry;

    1) Is it also possible to have the background of the header, when scrolling down, to have it a little bit transparant?

    2) Okay, i was working with the footer, saw the tutorial video, think i set everything well but have i look at yourself. Looks like crap haha. I just want to have the same footer as in your example demo. I enabled this in 8Theme options but everything is white.
    – Also the html code for a text block in VC doesn’t work… i think i did something wrong?

    3) how can i make the “Logout” link, as you have in the top header :)?

    4) on the Cart-page, you’ll see the section with “Have a coupon?”. But the button is all to the right. How can i set up this so it is the same as the fill in tab?

    5) I’m sorry but i still have blue links like: on a single product page the texts “Wishlist” “Email to friend”. How can i make this black?
    – How can i make those links in an other language?

    6) You give me a CSS for the “Add to cart” button in the shop. Works! Do you also have that for the button in the shop with a variabel product, they said “Choose option”?

    7) In the default demo, in the shop page, there is a black/white background image for the title area. Where can i set this up?

    Avatar: Eva
    Eva Kemp
    Support staff
    March 24, 2016 at 09:21

    Hello,

    Thank you for your feedback! We appreciate it very much.

    1. To make fixed header a bit transparent use this code in Global Custom CSS:

    .fixed-header-area {
        opacity: 0.7;
    }

    2. You should enter html code to text editor, not to visual http://storage3.static.itmages.com/i/16/0324/h_1458807115_1214705_c0feb32dc2.png .

    3. Logout link is already present on your site, you can see it when logged in to wp dashboard http://storage2.static.itmages.com/i/16/0324/h_1458807194_4192029_ae32e391d3.png .

    4. Try to use this code in Custom CSS for desktop section:

    #coupon_code {
        width: 38%;
    }

    5. Use this code in Global Custom CSS:

    .product-information .yith-wcwl-add-to-wishlist a, .product-information .email-link {
       color: black !important;
    }

    To translate theme strings please refer to our documentation https://www.8theme.com/demo/docs/royal/#!/1_how_to_translate .

    6. Please add this code in Global Custom CSS:

    .products-grid .btn.border-grey.product_type_variable {
        color: red;
        background-color: yellow;
        border: 1px solid red;
    }

    7. You can set breadcrumbs background image in Theme Options > Color Scheme > Breadcrumbs background and in Theme Options > Header > Breadcrumbs Style > With background.

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    March 24, 2016 at 17:09

    Hi Eva,

    Thanks! Worked all! 🙂

    1) About the footer: I only want 1 footer, but when i leave footer 2 widget empty, the demo footer comes up.
    2) Why is my footer white? I want exactly the same ad the demo, so a black background. Set everything right i think, in the 8theme options
    3) The product tags in the footer are blue, can this be black?
    + The links in the footer by Addres/Website etc. are also blue…
    Seems like all the links in the website are blue.

    4) I see that i have the logout option in the top-header. But that widget is empty. What is the code that you used for this?
    5) In the footer, is dudes the shortcode [share], but where can i edit this? I want to use other links and colors.
    6) How can i change the color of the title and breadcrumbs in the shop page?
    7) The “add to cart” + “Choose options” buttons in the shop have rounded corners, but i want to have theme square. Is this possible?

    Avatar: Eva
    Eva Kemp
    Support staff
    March 24, 2016 at 19:43

    Hello,

    1. You can disable demo footer in Theme Options > General > Show footer demo blocks > Off.

    2. To change footer background color you need edit your static block and set color in row settings http://storage1.static.itmages.com/i/16/0324/h_1458843905_7672494_dc0cc778b5.png .

    3. Add this code in Global Custom CSS:

    .tagcloud a, a {
      color: black; 
    }

    4. Sorry, but what do you mean by “But that widget is empty”? Please specify what code you need and where you want to use it.

    5. You need edit the file wp-content/themes/royal/framework/shortcodes.php (find the section “! Share This Product” in line 1918), to change links you need edit the code, for example for Twitter <a href="https://twitter.com/share?url='.$permalink.'&text='.$post_title.'" class="'.$tooltip_class.'" title="'.__('Twitter', ETHEME_DOMAIN).'" target="_blank"> and replace https://twitter.com/share?url='.$permalink.'&text='.$post_title.' with a link to your Twitter account.

    6. Add this code in Global Custom CSS:

    .page-heading .woocommerce-breadcrumb, .page-heading .title {
       color: red !important;
    }

    7. Use this css code:

    .products-grid .btn.border-grey.product_type_variable, .etheme_add_to_cart_button.product_type_simple {
      border-radius: 0 !important;
    }

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    April 6, 2016 at 14:48

    Hi Eva,

    Thank you again!

    1) I still have a really big header or padding between header and content. How can i make this smaller so i have a small header?
    2) Also i see a big padding between content en footer. how can i make this smaller?
    3) how can i make custom tabs in the checkout forms?
    4) how can i translate all woo commerce functions?
    5) When scrolling down, the header change, and the cart item is going down in line with the bottom of the header. Also the menu items are very small. And how can i make this logo when scrolling down, a lot smaller?
    6) The filter button in the shop is black on black. How can i change those colors?
    7) I still have blue links, like in the footer. How can i change this?
    8) See shop page-> The dropdown items in the sidebar, the arrow is over the text. How can i fix this?

    Avatar: Eva
    Eva Kemp
    Support staff
    April 6, 2016 at 15:42

    Hello,

    1. Please show a screenshot what exactly you want to achieve.

    2. Add this code in Global Custom CSS:

    .footer-top-2 {
      padding-top: 0px;
    }
    .page-content {
        margin-bottom: 0px;
    }

    3. This is related to Woocommerce configuration. Please refer to their documentation https://docs.woothemes.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/ .

    4. Read this article https://docs.woothemes.com/document/woocommerce-localization/#creating-custom-translations-with-poedit (“Creating custom translations with PoEdit”).

    5. To decrease logo size in fixed header use this code in Theme Options > Custom CSS > Custom CSS for desktop:

    .fixed-header-area .header-logo img {
        width: 100px;
    }

    Also use this code:

    .fixed-header-area .collapse {
        display: table-cell !important;
        width: 600px;
    }
    .fixed-header {
        margin-top: 10px;
    }

    6. I see now filter button uses white text. Clear browser cache and check.

    7. You missed one } in your css code. I’ve added it and now code is working.

    8. Use this css code:

    .sidebar-widget select {
       width: 100%;
    }

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    April 6, 2016 at 16:29

    Hi Eva,

    1) About the header, i want it a lot smaller like in your demo’s, see print screen: http://screencast.com/t/bSUYYPqEKo
    2) About footer en fixes header after scrolling: http://screencast.com/t/JUr2IN9X
    3) Other question to remove navigation of nivo slider, see print screen: http://screencast.com/t/RTRkkQ65XyLV

    Avatar: Eva
    Eva Kemp
    Support staff
    April 6, 2016 at 16:51

    Hello,

    1. I’ve added this code in Global Custom CSS:

    .navbar {
       padding-bottom: 0px !important;
    }

    Please check header now.

    2. To align cart widget in fixed header I’ve added this code in Custom CSS for desktop:

    .navbar-right .navbar-right {
        margin-top: 15px;
    }

    and this code for footer:

    .footer-top-2 .vc_column_container > .vc_column-inner {
       padding-top: 0px !important;
    }

    Please check.

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    April 6, 2016 at 16:53

    Woh, Eva, you’re really quick 🙂 Thank!

    3) Other question to remove navigation of nivo slider, see print screen: http://screencast.com/t/RTRkkQ65XyLV

    Avatar: Eva
    Eva Kemp
    Support staff
    April 6, 2016 at 16:59

    Hello,

    Please use this code in Global Custom CSS:

    .wpb_gallery .theme-default .nivo-controlNav {
       display: none;
    }

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    May 6, 2016 at 14:10

    Hi Eva,

    I want to use “promo pop-up”. I made a static block called “pop up” but where can i find the shortcode and the number of the static block that i want to use?

    Avatar: Eva
    Eva Kemp
    Support staff
    May 6, 2016 at 14:23

    Hello,

    The shortcode is [block id= " "]. You can find block id in address url http://storage3.static.itmages.com/i/16/0506/h_1462541009_6082213_33064b2169.jpeg .

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    June 2, 2016 at 10:28

    Hi Eva,

    1. Fixed header has 2 times the menu
    2. How can i change the font color of the second column in the footer?
    – And how can i make the title of the second column also with a black line, like the third column?
    3. Do you also have your own SEO options?
    4. At the shop-> Page navigation (1,2,3) is black square. How can i change the font color in white?
    5. When you are in a single product page, and look at the related product at the bottom. The “Variations” buttons are different than the “Cart” buttons. How can i make those the same as the “cart” buttons?
    6. Look at the shop page. When there is 1 product reviewed, there are stars. But now the product images are not on the same line anymore. Is there anything to do about this? So that they are always at the same line?
    7. I want custom product category headers, but when i put the image in the category, it’s show very small. I want them to be 1200×450 px. What to do? See:http://www.puro-dogfood.com/dog/puppy-voeding/?v=796834e7a283
    8. I edit the MO and PO translataion files and added it to the map Languages, called nl_NL. But where can i set this up? because now the don’t show the translations.
    9. On the mobile, the fixed menu goes over the content. Also added a css but don’t work

    Avatar: Eva
    Eva Kemp
    Support staff
    June 2, 2016 at 12:58

    Hello,

    1. Go to Appearance > Menus > Manage Locations > remove your menu in “Main menu (right)” section.

    2. Use this code in Global Custom CSS:

    .footer-top-2 .widget_nav_menu li a {
      color: #000 !important;
    }
    .footer-top-2 .widget-title span::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        top: 8px;
        left: 0;
        position: absolute;
        background: #3f3f3f !important;
        z-index: 1;
    }

    3. Sorry, but we don’t have SEO options in the theme.

    4. Use this css code:

    .pagination-cubic li span.page-numbers.current {
       color: #FFF !important;
    }

    5. Add the following css code:

    .product_type_variable {
        color: black;
        background-color: #cda85c;
        border-radius: 0;
    }
    .product_type_variable:hover {
        color: #cda85c;
        background-color: black;
        border-radius: 0;
    }

    6. Unfortunately it can’t be set on the same line because additional row is taken by “review stars”.

    7. As I see image is shown fine http://storage5.static.itmages.com/i/16/0602/h_1464868501_5846795_d2f9b5033c.jpeg due to the width of container. If you want to show it full width you need remove sidebar.

    8. Please provide FTP credentials.

    9. I’ve removed the following code from Global Custom CSS and kept only in Custom CSS for desktop:

    .fixed-header-area .collapse {
        display: table-cell !important;
        width: 600px;
    }

    Please check now.

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    June 2, 2016 at 19:46

    Hi Eva,

    Thanks you!

    See private content for FTP inlog.

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    June 3, 2016 at 09:26

    Hello,

    FTP credentials are incorrect. Please check them.

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    June 3, 2016 at 09:31

    Sorry!

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    June 3, 2016 at 10:45

    Hello,

    Thank you. Now the credentials are correct.
    As I see your site is translated. Please specify what exactly you can’t translate.

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    June 8, 2016 at 09:21

    Hi Eva,

    I made some customizing in the translation files nl_NL but i can’t see the changes. How can i set those files in the webshop? I already uploaded it in the map languages.
    And i also want to know this because we have to translate it also in other languages 🙂

    1. It it possible to set the shop page, on the mobile, in 2 columns?

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 8, 2016 at 11:19

    Hello,

    I’ve updated translation files.
    Please check now.
    If the problem still persists please specify what exactly should be changed.

    1. Add this code in Theme Options > Custom CSS > Custom CSS for mobile:

    .products-grid .product {
       width: 50% !important;
    }

    Best regards,
    Jack Richardson.

    Avatar: irish
    irish
    Participant
    June 8, 2016 at 11:35

    Hi Jack,

    How did you do that then? And where do you set the NL_nl?
    Nothing changed unfortunately.
    For example:
    Checkout->Afrekenen
    Product description->Product omschrijving

    Avatar: Eva
    Eva Kemp
    Support staff
    June 8, 2016 at 11:54

    Hello,

    As I see some strings aren’t translated in nl_NL.po file in the directory wp-content/themes/royal/languages:
    http://storage2.static.itmages.com/i/16/0608/h_1465383074_2076454_e7dcc4cb08.jpeg
    Check it.
    Also I’ve added locale in wp-config.php file:
    $locale='nl_NL';

    To translate “Checkout” title you need rename the “Checkout” page with your language in Pages section.

    Regards,
    Eva Kemp.

    Avatar: irish
    irish
    Participant
    June 13, 2016 at 07:48

    Goodmorning!

    1. See footer titles. There is some line going over the text and the title “information” does not have a line at the left and right side.
    2. Can i remove all SKU names in a single product page? We don’t use it. But when leaving empty i still see this: http://www.puro-dogfood.com/product/crocmix-2611/
    3. How can i make the breadcrumbs link, in white?
    4. How can i remove the date in 8Theme Recent posts widget? So you only see the title?
    5. How can i set a empty space between the header and the content on the blog page: http://www.puro-dogfood.com/puro-tips-nieuws/ ? Now the image of the 1st blog is totally against the header…

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 13, 2016 at 08:42

    Hello,

    1. Add this code in Global Custom CSS:

    .footer-top-2 .widget-title span::after {
        display: none;
    }

    2. Please use this css code:

    span.sku_wrapper {
        display: none;
    }

    3. Add the following css code:

    .page-heading a {
        color: white;
    }

    4. Add this code:

    .blog-post-list .media > .pull-left {
       display: none;
    }

    5. Use this css code:

    .blog .page-content {
        margin-top: 30px;
    }

    Best regards,
    Jack Richardson.

  • 1 2
    Viewing 30 results - 1 through 30 (of 58 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.