Copying WooCommerce design to Builder

Greetings! I was wondering if it'd be possible to copy the woocommerce layouts from the initial upfront themes (lets say Parrot) to a theme built with Upfront Builder?

Would this be just copying CSS?

Much Love,
Ciro Bey

    Nastia

    Hello Ciro Bey , I hope you are well today

    There are two ways that you can copy the product archive page style.

    You can edit the Parrot theme as a base and edit or add new page templates. This way the WooCommerece CSS will be loaded automatically in a new theme/

    Or you can copy & paste the CSS from each Woocommerce element's preset to a Product Archive preset in Upfront Builder

    Let me know if you have any further questions!

    Cheers,
    Nastia

    Ciro Bey

    Hey there NeoCODNastia would that be a widget there in the screenshot?

    Also, would this work for individual product pages and cart/checkout pages as well? Would I need to use widgets for these? And how are product pages displayed, via shortcode?

    I'm also not seeing where to upload the featured image for products with woocommerce. I'm able to upload for the "product gallery" but those aren't showing up for the featured/or product image.

    Screenshot 1 shows the edit product page with the image selections.

    Screenshot 2 shows the product list page with no featured image. There is no main image displayed on the product page (frontend) as well.

    Thanks for the support,
    Ciro Bey

    Sajid

    Hello Ciro Bey,
    Hope you are doing good today

    Yes, you can use the widgets of WooCommerce too and create new preset by adding the CSS you copied from WooCommerce page as suggested by Nastia above.

    If that is not clear then follow the exact steps below to find the CSS code of shop page.

    1. Go to shop page by using the Upfront child theme whose style you like.

    2. Launch Upfront.

    3. Now click on products section and then click on gear icon.

    4. Now make sure that Archive Shop is selected in preset and click on Edit Preset CSS.

    5. Finally copy the CSS and save it somewhere to use it later on your own theme.

    To apply this CSS on your custom Upfront theme, go to shop page, edit with upfront and paste your CSS in the preset there.

    Also, would this work for individual product pages and cart/checkout pages as well? Would I need to use widgets for these? And how are product pages displayed, via shortcode?

    This is up to you, you can use widget, shortcode and templates. But the CSS styles described above is for templates and may not work well with widget and shortcode.

    Screenshot 2 shows the product list page with no featured image. There is no main image displayed on the product page (frontend) as well.

    To add product images, edit the product in WordPress admin area like you do with posts and then set the product image (see screenshot).

    If it does not show up on your end then make sure Product Image is checked in Screen Options (see below screenshot).

    Take care and have a nice day!

    Best Regards,
    Sajid

    Ciro Bey

    Hey there Sajid
    Thank you for the product image tip, that helped a bunch.

    As for copying the CSS, I'm not quite sure the templates are set up right on my end (tamanasprings.com).

    I don't have templates for the shop pages, cart, etc. (I added CSS for the cart and checkout). The product pages themselves are showing up with presets. Although when I copy the CSS from the default parrot theme there is no change to the style. It doesn't look like the CSS is for woocommerce in the first place?

    EDIT: I found some css in the Theme CSS Settings (parrot) which seem to have changed the button styles. I'm not sure if there was anything else that is needed to match the Parrot (or any) theme styling.

    Much Love,
    Ciro Bey

    Sajid

    Hello Ciro Bey,
    Hope you are doing good today

    Those pages are of WooCommerce by default, you don't need to create those. Just open up /shop page by enabling parrot theme, copy the styles as mentioned above, switch the theme and paste the CSS in here.

    In some themes, the default styles of buttons, headings and links may apply that does not come from WooCommerce styling.

    For WooCommerce page styling, you may notice .woocommerce prefix to all CSS rules.

    Take care and have a nice day

    Best Regards,
    Sajid

    Ciro Bey

    Hey there Sajid

    The theme I'm using is a custom build one in Upfront Builder, although pretty simple. When I installed WooCommerce the pages were made for the plugin (shop, cart, account, etc.) although I don't think the pages were set up correctly with shortcodes or whichever is used (you mentioned templates). Is this because there would be no woocommerce/product template built yet being a new theme?

    Also, whithin the Parrot theme, this is the CSS I am seeing for the WooCommerce elements:

    I am not seeing any of the CSS with .woocommerce.

    Perhaps you could take a look at these things.
    Feel free as the support is open.

    Much Love,
    Ciro Bey

    Sajid

    Hello Ciro Bey

    Thanks for granting support staff access. On your website, I can see that the /shop and /product-category pages does not display products on your custom theme.

    First I thought, its due to custom theme built with builder but I could not replicate it on my own end with builder. I created a blank theme with builder and it does show products on /shop and /product-category pages.

    Then, to figure that I deleted the shop element in upfront editor. That definitely removed the element and in results no products on /shop page as yours.

    So, do you remember if you have deleted the WooCommerce Product element in Upfront editor accidentally ?

    Or did you created this custom child theme before the WooCommerce theme came out ?

    Please advice so we can move forward!

    Sajid

    Ciro Bey

    Hey there Sajid
    I don't believe I deleted any of the elements on those pages. Although, it may be good to mention that I won't be using the default elements on those pages either way. Just the product pages and cart/checkout screens etc.

    And the theme was built prior to the upfront/woocommerce update if I recall. But I have since updated the theme alongside with the Builder and Upfront updates.

    Sajid

    Hello Ciro Bey,
    Hope you are doing good today

    I contacted the developer of Upfront and he says that there seems to be issue with archive template files.

    Did you deleted or modified any theme file (.php file) ?

    Also, is it okay for you to send in FTP details so one of us could actually see the files ?

    You can send the requested details via our secure contact form in following format.

    Subject: "Attn: Sajid Javed”
    - WordPress admin username
    - WordPress admin password
    - login url
    - FTP credentials (host/username/password)
    - link back to this thread for reference
    - link to the downloadable snapshot zip archive.

    See screenshot attached:

    Take care and look forward towards your response

    Best Regards,
    Sajid

    Sajid

    Hello Ciro Bey,
    Hope you are doing good today

    I am sorry for delay on this ticket. I have forwarded the information to one of our core developer to take a closer look.

    As soon as I heard back from them, I will post a reply here.

    But meanwhile, is there a way you could reset your theme ? This will delete the changes made with Upfront only. The changes of Upfront Builder will be there (since they are in theme files instead of database). But to stay safe, take backup of full website before reseting the theme.

    Best Regards,
    Sajid

    Ivan

    Hey Ciro Bey,

    I hope you have a great day.

    I took a look at your issue and managed to resolve it. The issue was that in product category archive layout (php file) display_type for posts element wasn't set to anything. I have set it manually to 'list' and now it works properly. I have gone step ahead and created product tag archive layout and fixed it manually too so you can style it to your liking. (if for whatever reason you don't want to have product tag layout you can delete it manually from your_theme/layouts directory)
    This is permanent fix for this theme you made so you don't need to take any additional steps.
    Have fun with making an awesome theme (looks great btw).

    Thanks you for the report and access to your site, it helped a lot in finding what was the issue.

    Cheers,
    Ivan

    Ciro Bey

    Hey there Ivan and Sajid
    Thank you for taking a look and changing those things.

    However, I am still not having all the templates show up on the designated pages.
    The woocommerce template/element loads on individual product pages fine. Though I don't have anything on the Cart, Checkout, My Account, or any other Woocommerce related pages.

    As mentioned before, I'm planning on using a third party plugin to display on the product and category archive pages, so I'm not too interested in having the default templates show up on those pages. Rather, I'm looking to have them be displayed on the Cart, Checkout, My Account and Order Status Pages, etc.

    Right now I've put shortcodes on the Cart and Checkout pages as a substitute, but like Sajid mentioned, I won't be able to apply the CSS to those easily.

    EDIT: I loaded the Shop archive/base page in Upfront and found the Woocommerce element there for the shop products. Although, this is only displayed within the Upfront editor and not on the live version of the page even when saved.

    Much Love,
    Ciro Bey

    Ciro Bey

    Is this specific to my site or because of the theme being built in Builder?

    And is there still ways to copy the style of another upfront theme (for example Parrot) into the theme built with Builder?

    I have copied the Theme CSS regarding woocommerce from Parrot theme to the one built with builder (Spring). Some things may have changed tho i'm having some styling issues. Here are the screenshots.

    (Parrot Theme)

    (Spring Theme)

    Nastia

    Hello Ciro Bey , I hope you are doing well today!

    This is because the headings of the products are not set in the CSS code. You can set H1 to H4 heading with builder from Theme Settings > Typography

    As for the Description and Review tabs, I've commented out the following CSS inside the region's preset and the tabs view are fixed now:

    /*.content ul:not(.upfront-field-select-options) li {
        text-indent: -15px
    }
    */

    Let me know if you have any further questions!

    Cheers,
    Nastia

    Nastia

    Hello Ciro Bey

    What did you mean by changing it to H4?

    I'm sorry if I wasn't clear here, I meant that you have options to edit H1, H2, H3 and H4 heading from Theme Settings

    If I change the theme's (in Builder) H1 size wouldn't I be changinTim all the H1 size on the site?

    Yes, Theme Settings are global settings and all the other pages will be affected. If you wish to change only the headings withing products page, then you can do it with CSS code.

    Add this to the element's CSS preset:

    h1 {
        font-size: 35px;
    }

    Play around with 35 value to achieve the result you are looking for.

    Also, that code was in the region css? That confuses me a bit as I thought the Region CSS was clear

    My apologies for the confusion here, the CSS code is in the product's element's preset, not in the region's CSS editor.

    Let me know if you have any further questions!

    Cheers,
    Nastia

    Ciro Bey

    Thanks Nastia

    I've managed to add that code to change the h1 for the product element. How come the text was smaller in the default Parrot theme with the same Global text settings?

    Also, the code that was making the 'Reviews' tab seemed warped, why was that having a problem here and not on the default Parrot theme?

    Also, how could I make the Quantity field show up as it does in the screenshot above (Parrot theme)?

    Much Love,
    Ciro Bey

    Nastia

    Hello Ciro Bey

    How come the text was smaller in the default Parrot theme with the same Global text settings?

    In Parrot theme, the Global Typography settings are customized, set at different size value. When a new theme is created with Upfront Builder, the Typography option has default settings.

    Also, the code that was making the 'Reviews' tab seemed warped, why was that having a problem here and not on the default Parrot theme?

    I am not very familiar with entire CSS code of the Parrot theme, I am sure that there is another CSS code, in the global theme CSS that is balancing the text-indent option of the li element.

    Also, how could I make the Quantity field show up as it does in the screenshot above (Parrot theme)?

    This bellow CCS code should make the quantity field same as Parrot's theme.

    .input-text.qty.text {
        background-color: #ffffff;
        border: 1px solid #cecac7;
        border-radius: 4px;
        box-sizing: border-box;
        color: #666666;
        display: block;
        font-family: "Open Sans", Arial, sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.4em;
        padding: 0 10px;
        opacity: 1;
        transition: all 0.23s ease;
    }
    .upfront-output-object input[type="number"] {
        height: 40px;
    }

    Add this code inside the CSS present of the product element.

    I hope this will help!

    Cheers,
    Nastia

    Ciro Bey

    Thanks for that Nastia

    The code you gave me was pretty close though the height showed up a lot skinnier. I made the line height to 2.7 which made it wider (screenshot 1), though is that the best way to do so?

    Also where was the code that you had found for that, or was this something you made yourself? I ask because when you say that

    I am not very familiar with entire CSS code of the Parrot theme, I am sure that there is another CSS code, in the global theme CSS that is balancing the text-indent option of the li element.

    I have copied the global CSS from Parrot theme to the current theme built with builder so that's why I asked as I figured they would show the same being the same CSS and all.

    It also seems that the preset associated with the Product Element CSS ("Defualt" Preset on Parrot theme) doesn't affect the Woocommerce element at all. Is there code in the Global CSS that is effecting the design for the product element on Parrot?

    Much Love,
    Ciro Bey

    Nastia

    Hello Ciro Bey , I hope all is well!

    Also where was the code that you had found for that, or was this something you made yourself?

    I copied this code from the demo Parrot page that I have installed on one of my installations. I found this element from the developer console

    You can find more about the developer console here, almost every browser have it.

    It also seems that the preset associated with the Product Element CSS ("Defualt" Preset on Parrot theme) doesn't affect the Woocommerce element at all. Is there code in the Global CSS that is effecting the design for the product element on Parrot?

    I see what you mean here. Most of the code is general and thay are indeed located within the Global Settings of the Parrot theme.

    I Upfront edit mode please go to Theme Settings, click on Global Theme CSS. From the line 351 till 517, you will find all the WooCommerce CSS code.

    I hope this will help!

    Cheers,
    Nastia