woocommerce, Single Product Page question

[mtgame21]

Hi,

The pic below is of a single product page. I would like to get the “Offered by…..” lines to display below the QTY and Add to Cart button, but I cant figure out how to add a line return after the add to cart button.

FYI, I moved the Product description, additional info sections to appear below the product picture with this code:. Before I moved it, the “Offered by” lines were below them, so when I moved them down below the product image, the “Offered by” lines moved up next to the button on the right.

/* Move the production description under the product images on WooCommerce single product page */
add_action( ‘init’, ‘wooDescrioption’, 10 );
function wooDescrioption() {
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 35 );
remove_action( ‘woocommerce_after_single_product_summary’, ‘kleo_woocommerce_output_related_products’, 20 );
add_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );
add_action( ‘woocommerce_after_single_product_summary’, ‘kleo_woocommerce_output_related_products’, 20 );
}

[mtgame21]

@sharmstr,

Please take a look at this question, as I am using your code (from another thread) to move some of the items on this Single Product Page. Thanks

[sharmstr]

Try this

COPY CODE

.woocommerce .summary .product_meta {
float: left;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[mtgame21]

Tried it, but unfortunately I didnt see any difference after adding the code to my Styles file

[sharmstr]

Because you have errors in your styles file. When there are errors, everything below those lines do not get processed.

COPY CODE

/* This code helped keep the format on the Member Search Page for 3 rows across and then 2 rows across for the Following/Followers TAB Pages for proper formatting. */
.following  #buddypress .kleo-isotope>.kleo-masonry-item, .following  #buddypress .kleo-isotope>li {
    width: 50%; !important;
}

.followers  #buddypress .kleo-isotope>.kleo-masonry-item, .followers  #buddypress .kleo-isotope>li {
    width: 50%; !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[mtgame21]

sharmstr,

First Im fairly new to wordpress so Im dont understand why my styles file has errors in it,since Im not seeing error notifications in wordpress dashboard. Is there another way I can tell if there are errors?

I believe the lines that you referenced are working, and I got them from a mod on this board a few months ago, but I dont remember who at the moment. Currently, it seems everything else below those lines you referenced appear to be working.

Based on what you said, I moved this code from the bottom to the very top of my styles file to see if it made a difference but no luck.

.woocommerce .summary .product_meta {
float: left;
}

[sharmstr]

Looks like its working to me. Is that not what you wanted? See attached.

The issue with your css is

COPY CODE

 width: 50%; !important;

it should be

COPY CODE

 width: 50% !important;

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[mtgame21]

This was starting to drive my crazy, because it still wasnt working for me.

Then I was looking at your pic and noticed that where it says “Contact Vendor”, you were not logged in. So I logged out and went to the same page that you were on and it looks correct, just like in your picture.

But if you’re logged in and go to to the same page, the style problem still happens.

I tested in both Firefox and Explorer browsers and got the same results. Below are the pics from Firefox and firebug, logged in and logged out display.

Can you see any info in these pics that might explain why this happens? I appreciate your help.

[sharmstr]

I do not.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

Try adding display: block;

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

or clear:both;

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[mtgame21]

Do you want me to add that to the top of the Styles file, above the other code you provided?

[sharmstr]

No, within it.

.woocommerce .summary .product_meta {
float: left;
clear: both;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[mtgame21]

That fixed it!!! I only tried/used the clear.both line and not the display block line.

[Author]

Posts