Product titles & WooCommerce Product page.

This topic has 24 replies, 4 voices, and was last updated 10 years, 5 months ago ago by Jack Richardson

  • Avatar: Peter_rambeck
    Peter_rambeck
    Participant
    June 9, 2015 at 07:51

    Dear Eva,

    Thanks for always good support,

    A few questions, pls.:

    Portfolio page, in the breadcrumb it automatically list the path as: / projects /
    ( see screenshot below )
    Can i Change this, if how?

    Product page: Think I need a developer for this task?
    In order to make the page serve our buzz better, I would like to have the featured image/gallery/slider to be full row, and move 2nd column in the top row – to 2nd row, first column.
    Please see screenshots below,

    If I need a WooCommerce coder for this, can you recommend someone?

    The Cart variables selections, 2nd row – 2nd column:
    1. Colour #000, to make it clear. How to do this?
    2. The selection category box, as response – on tablets only! – does not automatically machete width of the column, making the text break.

    View Cart: the view cart page is 3 columns, – Responsive on a smartphone making The product specifics listed vertically which can be hard to see.
    Smartphone only.

    Checkout page: How do I change text: “Billing Address” & “Order notes?”

    Thank you,
    Have a great day Peter

    Please, contact administrator
    for this information.
    23 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 9, 2015 at 10:36

    Hello,

    1. You can change the text in breadcrumbs by editing the following file wp-content/themes/legenda/framework/portfolio.php in line 13

    2. Try this css code in custom.css:

    .single-product-page .product-info .product_meta {
      float: none;
    }
    .single-product-page .span6 {
      width: auto !important;
    }
    .single-product-page .product-info .variations_form {
      float: right;
      width: 40%;
    }

    3. Please provide us with screenshot what you want to modify for better understanding.

    4. Unfortunately there is no feature to change mobile cart view.

    5. To change line “Billing Address” you need to edit the file wp-content/themes/legenda/woocommerce/checkout/form-billing.php in line 21, and “Order notes” in wp-content/plugins/woocommerce/includes/class-wc-checkout.php in line 120

    Best regards,
    Jack Richardson.

    Avatar: Peter_rambeck
    Peter_rambeck
    Participant
    June 9, 2015 at 10:50

    Dear Jack,

    Thank you for quick response, will try the solution.

    Point 3.
    Screenshot 1:
    Full row slider,
    http://www.awesomescreenshot.com/image/307380/1cf377df5a00e1ac20f88f238b709a5f

    Screenshot 2:
    The product short description text field, – move to row 2 – column 1.
    http://www.awesomescreenshot.com/image/307410/bce80f519953e377b6823046ebbb6eca

    If I want to install a child or custom functions.php, to the Theme.
    How? – Like custom.css in the root, custom.functions.php?

    Many thanks Peter

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 9, 2015 at 13:34

    Hello Peter,

    Regarding full row slider I’ve provided you the css code in previous post.
    As for these questions

    1. Colour #000, to make it clear. How to do this?
    2. The selection category box, as response – on tablets only! – does not automatically machete width of the column, making the text break.

    can you please show on screenshot which element you want to change and problem you faced on tablets?

    To create child theme please read this documentation http://codex.wordpress.org/Child_Themes

    Best regards,
    Jack Richardson.

    Avatar: Peter_rambeck
    Peter_rambeck
    Participant
    June 10, 2015 at 05:52

    Dear Jack,

    Thanks for good help,

    1. Custom CSS, you code works nicely thanks, though responsive (smartphone) the Variations form is 50% hidden, or non visible.
    http://www.awesomescreenshot.com/image/311433/fdc3c787934905bc90ff1c8e5ab9091d
    http://www.awesomescreenshot.com/image/311464/3a87ae2f24ae4f75372d7cfb9ef48ae3

    2. color, – font color in the variations form.
    I have managed to change the label color with:
    .label {
    color: #000
    }
    But not in the variations form.

    3. Tablet, I don;t have a screenshot just now, though there seems to be a right-margin, that pushes the text in the variations to break.

    4. functions.php, I have read the guideline from WP codex thanks and made a Child theme folder.
    Though two things, – in the Legenda custom.css we don’t use a child theme folder, though place it directly in the root?

    I have made a functions.php and placed it in the child theme folder, ( but kept custom.css in the root ) with this code, se below,
    What am I doing wrong?

    <?php
    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
    function theme_enqueue_styles() {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
    }

    // Hook in
    add_filter( ‘woocommerce_checkout_fields’ , ‘custom_override_checkout_fields’ );

    // Our hooked in function – $fields is passed via the filter!
    function custom_override_checkout_fields( $fields ) {
    $fields[‘order’][‘order_comments’][‘placeholder’] = ‘My new placeholder’;
    return $fields;
    }
    ?>

    Your good help is very much appreciated,
    All the best Peter

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 10, 2015 at 10:26

    Hello,

    To create child theme you also need create style.css in child directory regarding the WP documentation.
    I’ve created the one and uploaded it to the legenda-child folder. To make your child theme active you need activate it in WP Dashboard > Appearance > Themes.
    As for the 1-st, 2-nd and 3-rd questions here is the css code:

    .single-product-page .product-info .product_meta {  
    float: none;
    }
    .single-product-page .span6 {  
    width: auto !important;
    }
    .single-product-page .product-info .variations_form {  
    float: right;  width: 40%;
    }
    @media (max-width: 480px) {
    .single-product-page .product-info .variations_form {  
    float: left !important;  
    width: auto !important;
    margin-left: -10px !important;
    }}
    .variations label, .variations select {
       color: #000 !important;
    }

    If you activate child theme you can paste this code into the wp-content/themes/legenda-child/style.css file, otherwise add the code in custom.css of the parent theme.

    Best regards,
    Jack Richardson.

    Avatar: Peter_rambeck
    Peter_rambeck
    Participant
    June 11, 2015 at 07:36

    Dear Jack

    Super good thanks,
    Very much appreciated.

    Reg. the issue about tablet-responsive, where the text breaks.
    Please see here.
    http://www.awesomescreenshot.com/image/316040/259e08efc96eb6fa52b5c45d6b72e84c
    Seems like the right margin push the form the break?

    Smartphone, no issues.

    Thanks Peter

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 11, 2015 at 14:47

    Hello Peter,

    Try the following css code to fix the issue with tablet-responsive view:

    @media (max-width: 800px) {
    .variations select {
        width: 180px;
    }}

    Best regards,
    Jack Richardson.

    Avatar: Peter_rambeck
    Peter_rambeck
    Participant
    June 12, 2015 at 05:36

    Hi Jack,

    Will do thank you,

    Sorry bother you about the slider configuration on the product page, but been testing for 2 days now and each time ( not in the cache already ) the slider/picture upload always stops 1/5 way.
    Same for standard configuration as well.

    Once it stops loading, it will only resume when some interaction clicks on the page happens, meaning that when only scrolling down/up it looks like something it wrong.

    Here from a test with pingdom,
    http://www.awesomescreenshot.com/image/319553/775ffcb535de73141fd13295f657144b

    Thanks for all your help,
    Good Friday Peter

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 12, 2015 at 10:25

    Hello,

    Please update Revolution Slider and Visual Composer plugins to the latest versions. You can download theme at this link: https://www.8theme.com/download-plugins/ .
    After that clear browser cache and disable cache plugin and clear cache folder via FTP.

    Best regards,
    Jack Richardson.

    Avatar: Peter_rambeck
    Peter_rambeck
    Participant
    June 16, 2015 at 05:26

    Dear Jack,

    Thanks for the links.

    1.
    I have updated the plugins, deactivated W3 Cache and deleted the directory via FTP.
    Though it doesn’t seem to be loading properly,
    Here from pingdom,
    http://www.awesomescreenshot.com/image/328062/6ffcd988ec585afecae63deb378a03da
    Is there another way?
    If, possible is there another Speed=up cause plugin that is better?

    2.
    Yesterday when making new Product pages, I noticed that the code:
    width:auto !important;
    from:
    .single-product-page .span6 {
    width:auto !important;
    margin-bottom: 20px;
    }
    breaks the columns in the tab on the page
    http://www.awesomescreenshot.com/image/328056/9c80e3b2a40db9f4780265afc63c1ebe
    http://www.awesomescreenshot.com/image/328058/c57d97635ad69f0d77534906c12c503e

    Your good help and assistance is much appreciated,
    Have a great day, Peter

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 16, 2015 at 11:16

    Hello Peter,

    1. I was trying to replicate the issue with slider on your site but problem didn’t appear. Slider works fine.

    2. Please specify how you want to display the columns in the tab? Please show us a screenshot how it should be. Also provide us with the link to the new created Product page.

    Best regards,
    Jack Richardson.

    Avatar: Peter_rambeck
    Peter_rambeck
    Participant
    June 16, 2015 at 12:05

    Dear Jack,

    Sounds good if the slider loads nicely, will check again.

    Reg. the breaking columns, it’s like this:

    Like it should be: 2 separate columns.
    http://www.awesomescreenshot.com/image/328058/c57d97635ad69f0d77534906c12c503e
    Then what it is with the ‘auto-code’: Break the 2 columns to 1.
    http://www.awesomescreenshot.com/image/328056/9c80e3b2a40db9f4780265afc63c1ebe

    Sorry, Jack.
    But after I updated the Visual Composer – Via FTP.
    I get that there are outdated files:
    http://www.awesomescreenshot.com/image/329075/ea1c1716546ed974fd3010a175c499e4

    As well as WooCommerce has outdated files, ( this now for 4-5 months )
    Been trying to update them, – Via FTP – but it keeps going back to the same.
    1.
    http://www.awesomescreenshot.com/image/329083/fd93b27af1e5916a9abe951edd19a52b
    2.
    http://www.awesomescreenshot.com/image/329085/79cbad230d0ea3103acb3b83e0dcd016

    You’re a massive help, thanks

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 16, 2015 at 14:15

    Hello Peter,

    The issue with outdated files is fixed.
    As for the columns in the tab section I’ve added the css code into Custom CSS block in Visual Composer editor for the product “The Muse” as shown on the screenshot http://prntscr.com/7hllws :

    .tab-content .wpb_column.span6 {
      width: 46% !important;
    }

    Please check this page now.

    Best regards,
    Jack Richardson.

    Avatar: Peter_rambeck
    Peter_rambeck
    Participant
    June 18, 2015 at 06:45

    Hi Jack,

    Once agin I/m sorry to bother you with my styling, though it’s not working properly on the devices.
    “width: auto;” is making issues,

    If you paste the following code:
    .single-product-page .product-info .short-description {
    width: auto;
    }
    It doesn’t break at ( e.g. 49% ) see here,
    http://www.awesomescreenshot.com/image/335622/d9e21d7fb38147975a9c8bab9d45c4c4

    and if I use: “width: 49%;” or like this, it only displays 49% on the devices,
    see here from the phone:
    http://www.awesomescreenshot.com/image/335625/3ee6db92398fb0d39c1622e18ea94927

    The same goes for the tab content,
    .tab-content .wpb_column.span6 {
    width: 46% !important;
    }

    Can you please advise,
    Thanks, Peter

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 18, 2015 at 22:36

    Hello Peter,

    I’ve removed the following css code from VC editor in Custom CSS section for the product “The Muse”:
    .single-product-page .tab-content .wpb_column.span6
    and

    .single-product-page .product-info .short-description,
    .row-fluid .span6 {
      width: 48.93617021276595%;
    }

    Could you please explain what exactly you wanted to achieve with this code?

    Also I’ve added css code for mobile device:

    @media (max-width: 480px){
    .tab-content .wpb_column.span6 {
      width: 100% !important;
    }}

    Please take a look at this product page now. Is that what you want? If no then please describe with more details how it should be.
    Thank you.

    Best regards,
    Jack Richardson.

    Avatar: Peter_rambeck
    Peter_rambeck
    Participant
    June 23, 2015 at 10:02

    Hi Jack,

    Thank you,
    To answer your question, The width “width: 48.93617021276595%;” was to make each column equal in width.

    Thank you for your help,
    can I ask you for an advise?
    I have a few things I would to have added in, as a “Date Picker” in the Variations form on the Product Page, but in same design as the rest of the Variations.

    I’m considering to sign up at “WP-Curve” to have stuff like this done.
    Is that a good idea in your opinion, and do you know if they are providing good work?

    Thank you, Peter

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 23, 2015 at 16:46

    Hello,

    Please add this code in custom.css file:

    table.wccpf_fields_table td.wccpf_value input[type=text] {
      width: 61% !important;
      padding: 8px !important;
      border: 1px solid #ddd !important;
    }

    Unfortunately we can’t give you any advice regarding WP-Curve. You should find some reviews here:
    http://wpcurve.com/wp-curve-review/

    Best regards,
    Jack Richardson.

    Avatar: Rodesig
    Rodesig
    Participant
    July 9, 2015 at 19:52

    dear support
    I can not see it single-product in my page

    Please, contact administrator
    for this information.
    Avatar: stan
    Stan Russell
    Participant
    July 10, 2015 at 08:10

    Hello Rodesig,

    we have navigated to your site and selected some products – all of them are displayed correct.
    Do you still have problems with products?

    Regards,
    Stan Russell.

    Avatar: Peter_rambeck
    Peter_rambeck
    Participant
    July 12, 2015 at 09:52

    Dear Stan,

    The response above is not for me,

    Have a good day Peter

    ” Hello Rodesig,

    we have navigated to your site and selected some products – all of them are displayed correct.
    Do you still have problems with products? ”

    Regards,
    Stan Russell.

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    July 13, 2015 at 10:41

    Hello Peter,

    Is your problem solved? Can we close this topic?

    Best regards,
    Jack Richardson.

    Avatar: Peter_rambeck
    Peter_rambeck
    Participant
    July 13, 2015 at 11:20

    Hi Jack,

    Yes, please close the topic thank you.

    Good day Peter

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    July 13, 2015 at 15:19

    Hello Peter,

    You are welcome. Have a nice day.

    Best regards,
    Jack Richardson.

  • Viewing 24 results - 1 through 24 (of 24 total)

The issue related to '‘Product titles & WooCommerce Product page.’' has been successfully resolved, and the topic is now closed for further responses

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