Product Placement Problem

  • chrisfroud

    (@chrisfroud)


    10 years, 11 months ago

    Hi I have created an ecommerce website using the Twenty Fourteen theme, the only problem that I now have is that the products on the various pages (categorized by brand etc) do not align when there is more characters in one product title compared to the other. The ‘Select Options’ or ‘Add to Cart’ button is the problem, if one product title was only 2 lines long compared to a product title that is 3 lines long then the ‘Select Options’ button underneath the product is not aligned with the similar buttons with the other products. The products are also far too close together for the ‘Select Option’ buttons to have spaces between, it’s not a problem for the product or titles except for the ‘Select Option’ button underneath. The buttons overlap each other, leaving some buttons saying “Select Optio” or “Select Op” before being overlapped by the next button. Also when the buttons aren’t aligned they sometimes overlap the price of the product underneath the product title. My website is not yet live but I have taken a screenshot of the problem that I was unable to upload. If anybody thinks they can fix my problem I can send a screenshot to clarify the issue.
    Thanks a lot

Viewing 7 replies - 16 through 22 (of 22 total)
1 2
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 11 months ago

    Look at the <body> tag when you view source and grab a unique class out – if you’re okay with basic CSS you should know what to do next.

    Thread Starter chrisfroud

    (@chrisfroud)

    10 years, 11 months ago

    When I have attempted to do so the alignment on the product tag and cart pages still was off

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 11 months ago

    This is just an amendment to the classes in the above CSS, e.g. the tags page might be something like this:

    .tax-product_cat .twentyfourteen .product a:first-child,
.post-type-archive-product .twentyfourteen .product a:first-child,
.tag-product_cat .twentyfourteen .product a:first-child {
    min-height: 300px;
    display: block;
}

.tax-product_cat .twentyfourteen .product a,
.post-type-archive-product .twentyfourteen .product a,
.tag-product_cat .twentyfourteen .product a {
    white-space: normal;
}

    Thread Starter chrisfroud

    (@chrisfroud)

    10 years, 11 months ago

    I have tried the above code but the alignment is still off for the products when I click on a ‘product tag’
    I’m not too good with CSS, I’ve not had any other problems with this theme except for the alignment, the fix you sent earlier was great which amended the problem in the product section but the only problem I have left is to make sure the rest of the website is aligned to (just the product tags, and cart are the main problem)

    http://www.oceandesignerwear.com/product-tag/summer/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 11 months ago

    Sorry the most recent code snippet will probably be wrong, because I guessed the class in the <body> element of the Tag page (.tag-product_cat). This is stuff you can check.

    Thread Starter chrisfroud

    (@chrisfroud)

    10 years, 11 months ago

    So if I changed this to .tag-summer for example for the summer tag, would that fix the problem?

    Sorry I don’t mean to be slow just not experienced with coding I went with wordpress as I was told it wouldn’t be required

    I appreciate all your help

    Thread Starter chrisfroud

    (@chrisfroud)

    10 years, 11 months ago

    I’ve been searching the internet for an answer or an instruction on how I would be able to understand the code and edit it correctly to fix this problem but I can’t find a solution or an explanation anywhere.

    I have been studying the code you posted for me but I am still struggling to get the desired effect when I try to alter it and apply it.

    Is it the “first-child” bit that needs replacing with my tag page names?

Viewing 7 replies - 16 through 22 (of 22 total)
1 2

The topic ‘Product Placement Problem’ is closed to new replies.