[Resolved] Bookstore view on Shop Page

[Paul]

Dear GP-Team,
first things first: I think Generatpress is great and I love working with it.
However, I’m having troubles with building a nice shop page for selling books.
I found this template an I wonder if it’s possible to recreate the way products are displayed on this page (with the picture on the right and the the text on the left in one wrapper; like in the section “New in”):
https://themes.woocommerce.com/bookshop/
Also, it would be great to have author, title and hardback/paperback in different styleable fields.
Is it possible to this with GP and WooCommerce and some tweaks?

On my site, I have installed the Soap Shop theme and I really like the design, but I will have to do quite some more adjustments.
Thanks for your help!

Best
Paul

[David]

Hi there,

it is doable, may take a little PHP and some CSS but can’t see anything too problematic.

To begin with – this PHP Snippet will give us the wrapper we need around our summary/meta/add-to-cart:

add_action('woocommerce_shop_loop_item_title', 'woo_shop_loop_item_open_wrapper',9);
add_action('woocommerce_after_shop_loop_item', 'woo_shop_loop_item_close_wrapper',100);

function woo_shop_loop_item_open_wrapper() {
    echo '<div class="woo-content-wrap">';
}
function woo_shop_loop_item_close_wrapper() {
    echo '</div>';
}

Then a little CSS to create the summary wrap | image row layout:

#wc-column-container .product {
    flex-direction: row-reverse;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    flex: 0 0 200px;
    margin-left: 20px;
}

If you can test that with your other meta etc. added to the site i can take a look at the other styling adjustments you need.

[Paul]

Hi David!
This is magnificent, I don’t know how many beers I owe you for your help, thankyou so much! 🙂

I applied your codes and decided to have the picture on the left, so I used “flex-direction: row” in CSS.

I also managed to have the names of the authors displayed on the shop and the product page. I did this by giving the products the attribute “autor” and then I used the .php from here: https://wordpress.org/support/topic/add-author-name-to-product-page/

However now I don’t know how to get the names of the author above the title of the book and some spacing below. Now, in some cases, when the name of the author is too short, the “Add to cart” button overlaps in the same line. Would be great if you can have a look at that.

[Elvin]

Hi Paul,

However now I don’t know how to get the names of the author above the title of the book and some spacing below. Now, in some cases, when the name of the author is too short, the “Add to cart” button overlaps in the same line. Would be great if you can have a look at that.

The reference child theme uses woocommerce_before_shop_loop_item_title hook with a priority of 11 for its author.

It’s using this function to display it.

You can use the same hook and priority value to display the author in the same order.

[Paul]

Hi Elvin, thanks, changed the hook to “woocommerce_before_shop_loop_item_title” and the priority to 11 in the funtions-php file.
However, now the author’s name is displayed below the image instead of above the book’s title in the next row.

Maybe the wrapper that David has provided has to be adjusted, since the hook hooks in before the title?

[David]

Try the woocommerce_shop_loop_item_title hook with a priority of 9 or less

See here for reference:

https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/

[Paul]

Thankyou David and Elvin for your great support!
That did it and it now works like a charm!
The only thing I wonder about now is if it’s possible to customize the attribute page for every author. Now, on the attribute page there is displayed the author’s name in the title and the products associated with the attribute.
Is there a way to customize it (Custom post type maybe?), so that I can add a text about the author, an image and also embed WP Show Posts shortcodes? This would be very handy and efficient as I wouldn’t have to create two sepaate pages for each author: one information page and one extra attribute-page showing the products.

[David]

Glad to hear that.
Not sure on the other question – could you raise a new topic on that – so we can mark this one as resolved ?

[Paul]

Yeah, of course!
I’ll mark it as resolved.

[David]

Thank you

[Paul]

Hi David,
I have to reopen this subject as I’ve come across some problems which I can’t resolve on my own.
I am using the hooks from posting #1994944 in order to display the author attribute on Woo-products. However, differently to what we had in mind in the other discussion, we’ve decided not to have the product info next to the image but below.

These are the issues that I have now:

1. The upsell-products on the products page don’t align to the top but to the bottom. I’ve checked with the inspector and it’s because flex is turned on. Probably this is because of the CSS you’ve provided, but I’m not sure if it’s needed somewhere else.
2. The images on the category pages seem to be not totally centered. I found this code, which I think is the issue, but I don’t know where it’s coming from:

.woocommerce ul.products li.product.woocommerce-image-align-left .wc-product-image {
    float: left;
    margin-right: 2em;
}

I added ‘margin-left: 1em;’ to equal it out, but maybe there’s a better way.
3. Cross-sells on the cart page look chaotic. You can see it if you add the product “Leuchtfeuer …” to the basket.
4. The author-hook makes the titles of the Woo-products non-clickable. Is there a way to undo that?

I hope this has not been too much and that you can help as I’m quite stuck with these problems.

[David]

Hi there,

our system shows a new topic has been opened regarding this. One of our team will respond to the new topic.

[Author]

Posts