Hero title position on WooCommerce category pages
Support Area › Forums › Elite › Hero title position on WooCommerce category pages
Tagged: category, hero title, woocommerce
- This topic has 13 replies, 2 voices, and was last updated 9 years, 3 months ago by Bill Robbins.
-
AuthorPosts
-
December 10, 2014 at 10:07 #24766slurpParticipant
Hi, Bill!
In the WooCommerce category pages, the title is automatically positioned left.
How can I center it?Also, I replaced the hero title on the front page with an image with this snippet:
body h2.hero-title { background-image: url(https://urltoimage.png); background-size: contain; text-indent: -9999px; height: 300px; width: 300px; }
The image now overrides the category texts that I guess WooCommerce automatically titled.
How can I contain the custom hero image only to replace the front page hero title?Thanks!
December 10, 2014 at 10:09 #24767slurpParticipantOh, and how can I get the image that replaces the hero title on the front page to position vertically and horizontally in the center? Now the top of the image seems to start at the vertical middle.
Thanks!:)
December 10, 2014 at 10:12 #24769Bill RobbinsModeratorHello Slurp,
We can likely help out. What’s the URL to your site?
Thanks,
BillDecember 10, 2014 at 10:25 #24773slurpParticipantThis reply has been marked as private.December 10, 2014 at 11:09 #24776Bill RobbinsModeratorThanks for sending over the login. Let’s use this CSS to center the logo on your homepage:
#hero-section { display: table; } .hero-copy { position: relative; display: table-cell; vertical-align: middle; top: auto; left: auto; right: auto; width: 100%; }
The custom-js.php file is somewhat tricky to override. Unless you have to remove something that’s there, I would copy the footer.php file over to your child theme and then just add in the script below this:
<!-- Load wp_footer --> <?php wp_footer(); ?>
If you absolutely have to edit the custom-js.php file, what you’ll need to do is copy this from the theme’s functions.php file and add it to your child theme:
function elite_files() { // include required files include(get_template_directory()."/includes/fonts.php"); include(get_template_directory()."/includes/titles.php"); include(get_template_directory()."/includes/images.php"); include(get_template_directory()."/includes/queries.php"); include(get_template_directory()."/includes/scripts.php"); include(get_template_directory()."/includes/body-tag.php"); include(get_template_directory()."/includes/custom-js.php"); include(get_template_directory()."/includes/shortcodes.php"); include(get_template_directory()."/includes/custom-css.php"); include(get_template_directory()."/includes/author-fields.php"); include(get_template_directory()."/includes/content-limit.php"); include(get_template_directory()."/includes/tha-theme-hooks.php"); include(get_template_directory()."/includes/theme-customizer.php"); include(get_template_directory()."/includes/comment-functions.php"); include(get_template_directory()."/inc/options-framework-scripts.php"); include(get_template_directory()."/includes/custom-meta-boxes/elite.php"); // Custom Post Types include(get_template_directory()."/includes/post-types/staff.php"); include(get_template_directory()."/includes/post-types/slides.php"); include(get_template_directory()."/includes/post-types/testimony.php"); include(get_template_directory()."/includes/post-types/admin-style.php"); // include widgets include(get_template_directory()."/includes/widgets.php"); include(get_template_directory()."/includes/widget-page.php"); include(get_template_directory()."/includes/widget-posts.php"); include(get_template_directory()."/includes/widget-video.php"); include(get_template_directory()."/includes/widget-social.php"); include(get_template_directory()."/includes/widget-product.php"); include(get_template_directory()."/includes/widget-contact.php"); include(get_template_directory()."/includes/widget-testimony.php"); include(get_template_directory()."/includes/widget-attention.php"); include(get_template_directory()."/includes/widget-featured-page.php"); include(get_template_directory()."/includes/widget-facebook-like-box.php"); }
Then you’ll need to change this line:
include(get_template_directory()."/includes/custom-js.php");
to this:
include(get_stylesheet_directory()."/includes/custom-js.php");
which will load the custom-js.php from the child theme instead of the parent.
To center the logo horizontally, I would add a bit more padding to the top:
#logo, #text-logo { padding-top: 15px; }
To center the hero section in a product category, use this:
.tax-product_cat #hero-section .hero-copy { text-align: center; }
For the scroll down, since that post was published, we added in the hero section for product categories so there is one more spot to edit. I went on and just made that change for you.
See how all that goes for you 🙂
December 10, 2014 at 12:15 #24785slurpParticipantHi!
Thank you very much for all that!
The hero title center now fine, but I would like to replace the text title with a picture. How would I go about that?
I tried adding it with the background-image command like this:.hero-copy { position: relative; display: table-cell; vertical-align: middle; top: auto; left: auto; right: auto; width: 100%; background-image: url("logo.png"); background-repeat: no-repeat; background-position: center; }
But that way the image (the logo) went to the actual center covering the hero texts.
Furthermore, if the hero title is changed in the front page, does it affect the WooCommerce category displaying as a text/name of the category? If so, can they be two separate instances?As for the logo in the navigation bar, I ended up just doing it with the right pixel dimensions, because otherwise the logo came over the navigation bar and I couldn’t figure out how to easily resize it to fit the nav bar.
Thanks, Bill! You are the best!:)
December 10, 2014 at 15:23 #24801Bill RobbinsModeratorI would probably only use text replacement on the caption or the title, but not both. It’ll be more efficient to make one image that has everything you need for the title and caption than to have two.
If you need to replace the caption with CSS image replacement, start with this:
.hero-copy p { text-indent: -9999px; width: 400px; height: 200px; background-image: url("logo.png"); background-repeat: no-repeat; background-position: center; }
You can use different images on different pages. WordPress adds unique body tags to each page/category so they can be styled differently. That would look something like this:
body.home .hero-copy p { text-indent: -9999px; width: 400px; height: 200px; background-image: url("logo.png"); background-repeat: no-repeat; background-position: center; }
where “home” is one of the classes added to the body tag on the home page.
You might look at the newest version of the theme. It adds in an uploader on each page so you can replace the hero title with an image. That way you can have different images in different places without having to code it in.
Take care,
BillDecember 10, 2014 at 16:15 #24810slurpParticipantHi!
I updated the theme! Now the featured products widgets stopped showing four items per row. 😀
Do you know what might be causing that?The custom css that made a row of four items instead of three is copied from this forum from one of your answers:
.product-list { margin-right: -15px; } .home-product-block li { width: 262px; margin-right: 15px; } .home-product-block li:nth-child(3n + 1) { margin-right: 15px; } .home-product-block li:nth-child(3n + 3) { margin-right: 15px; margin-left: 0; } @media only screen and (min-width: 1024px) and (max-width: 1200px) { .home-product-block li, #staff-list article { width: 217px; } }
December 10, 2014 at 16:24 #24813Bill RobbinsModeratorI think we’re past what I can give you in included customizations. If you’d like to pull together any additional ones, I can give you a quote.
Thanks,
BillDecember 10, 2014 at 16:28 #24814Bill RobbinsModeratorBefore that, try adding this to your Custom CSS along with the code above:
.product-list ul.fly-in li:nth-child(3n + 1) { clear: none; }
December 10, 2014 at 17:25 #24815slurpParticipantHello!
Oh, I am sorry! I didn’t mean to exploit your support in any way!
The simple truth is that your help here in this support forum is just so swift and great that I started turning to it quite often — I guess a bit too often.May I ask, what kind of support might I seek here in the future? Or have I filled up my quota on questions?
It might also be a good idea to add some guidelines to this forum about posting and what is included in the support. I hadn’t thought about this before, which probably means there might be others as well. 🙂The last line of code you provided fixed the problem! Thank you so much for everything, Bill!
From now on, I’ll try to resolve more on my own. 🙂
December 10, 2014 at 17:37 #24816Bill RobbinsModeratorI love to help folks. I really do.
Support really is questions about how to use a theme or if you’re having some type of trouble or have found a bug.
Customization is changing a theme to do something that it wasn’t designed to do. I do help out with some customization. Technically we include up to seven lines of code customized as part of a theme purchase. Typically I go much beyond that though because I do enjoy helping people.
Thanks again,
BillDecember 11, 2014 at 11:19 #24831slurpParticipantThat truly shows — and I bet I speak for everyone here, when I say I truly appreciate your insights.
Ok, I think I have a better idea now about what to come here for, in case I encounter such situations.
Take care and once more, thank you!
December 11, 2014 at 13:38 #24832Bill RobbinsModeratorAnytime. I really appreciate your business.
Let me know if you have any trouble.
-
AuthorPosts
- The topic ‘Hero title position on WooCommerce category pages’ is closed to new replies.