Return to previous page

Custom Sidebar & stuff - by panda - on WordPress WooCommerce support

This topic has 31 replies, 4 voices, and was last updated 10 years, 6 months ago ago by Robert Hall

panda

Participant

April 14, 2015 at 14:50

Hello again,

so, you helped me to style our sidebar, which was super nice.

It is just a minor issue:

-Padding seems inconsistent between ‘category’ links and ‘info’ links in the sidebar.

Category links looks ok with fine spacing, but Info links looks a little cramped.

I certainly dont know how to edit it.

Take a look if you wish:

Please, contact administrator
for this information.

#56837 Copied Theme version: Legenda WooCommerce version: 4.1.1

30 Answers
Robert Hall

Participant

April 14, 2015 at 14:56
Hello,

Try to add this code in custom.css file.

.sidebar-widget .widget-title{ margin-bottom: 10px !important; }

Regards,
Robert Hall.
#56842 Copied
panda

Participant

April 14, 2015 at 15:17

Thank you for the code,

but the ‘info’ links are still cramped together, unlike the ‘categories’ links.

If you login you can see for yourself.

Much appreciated!

#56850 Copied
Eva Kemp

Participant

April 14, 2015 at 15:30
Hello,

Try to use this code:

.sidebar-widget li { padding-bottom: 5px !important; }

Thank you.
Regards,
Eva Kemp.
#56855 Copied
Brian Johnson

Member

April 14, 2015 at 15:46

Please provide us with screenshot where necessary elements or margins are marked. This will allow us to modify previous code or add new. You may use this service.

With best regards
Brian Johnson

#56861 Copied

panda

Participant

April 14, 2015 at 16:24

I really appreciate your answers, thank you!

I added two text widgets to the sidebar – ‘Login’ & ‘Newsletter’

The space between them now is not in line with the rest.

I am confused.

And I am sorry to dump all this trivial stuff on you!

You can login to see if you wish, and if you have time.

#56870 Copied

panda

Participant

April 14, 2015 at 16:31

Ok.

I am sorry, I didnt catch your last reply. I will fix the screenshot.

#56875 Copied
Eva Kemp

Participant

April 14, 2015 at 17:10
Hello,

I’ve added this code in custom.css file:

.sidebar-widget.widget_text { margin-bottom: -13px !important; }

Please check sidebar now.

Regards,
Eva Kemp.
#56885 Copied
panda

Participant

April 14, 2015 at 17:25

Take a look if you please.

Padding between the curret links are irregular. By comparing the sidebars in our image you can spot the irregularities a little easier.

Thanks again!

Please advice further action next 🙂

Please, contact administrator
for this information.

#56895 Copied
Eva Kemp

Participant

April 14, 2015 at 18:56
Hello,

Try to use this code in custom.css file:

.sidebar-widget h2 { font-weight: bold !important; font-size: 18px; font-family: graduate !important; }

Regards,
Eva Kemp.
#56930 Copied
panda

Participant

April 14, 2015 at 21:04

Ok, so I have inserted code(s), but I am no wiser.

If you could login to our site and take a quick look. Think it would be easier, no?

#56944 Copied

Brian Johnson

Member

April 15, 2015 at 08:57

Hello

In case you want to use Helvetica Font please choose the folder for it and upload on your ftp and we will enable it via custom.css together. The main theme fonts are located in \wp-content\themes\legenda\css\fonts. Please let us know if you want to use this font from online source or locally as mentioned above.

With best regards
Brian Johnson

#57008 Copied

panda

Participant

April 15, 2015 at 15:37

Hello

Ok, so I have uploaded the fonts through our file manager to the above destination. There was a lot of .otf files when unpacking the zip(!) and I got all of them.

Please advice further action.

And again, thank you so much for this!!!

#57162 Copied
Brian Johnson

Member

April 15, 2015 at 18:26
Hello

Sorry for the long delay with answer.
You may replace previous @font-face value and code after it with this:

@font-face { font-family: 'helvetica'; font-weight: normal; src: url(http://www.panda.no/wp-content/themes/legenda/css/fonts/HelveticaNeueLTStd-Bd.otf)} .sidebar-widget h4 {padding-bottom:0px!important;margin-bottom:5px!important;} #pages-2 ul {padding:0;text-transform:uppercase;font-size:16px;line-height:25px;} .sidebar h4,.sidebar { font-family: 'helvetica'!important;} .widget-title{width:100%;padding-left:10px!important;padding-top:0px!important;background:black!important;color:white!important;font-size:16px;} .sidebar-widget, .sidebar-widget ul{list-style:none!important;margin:0!important;} .widget_categories a {padding:0;text-transform:uppercase;} .widget_categories a:before{display:none!important;} .widget_categories li a{padding-left:px;width:100%!important;} .widget_categories li {margin:0;padding:0;} .sidebar-widget #searchform input[type="text"] {width:140px;height: 20px;margin: 8px 0px 13px 0px;border:1px solid black; } #searchform .button {position:absolute;margin-left:-20px;width:19px;height:10px;padding:0;margin-top:10px;border:none;color:white;} .sidebar-widget li { padding-bottom: 10px !important; } .newsletter-email{width:179px;height:20px;border:1px solid black!important;margin-top:9px;} .sidebar-widget h2 { font-size: 16px;font-family: 'Helvetica' !important;} .product-categories {line-height:25px;} .product-categories .cat-item {padding:0!important;} .sidebar-widget .page_item{padding:0!important} #text-4 .widget-title{margin:0!important} #text-4 .textwidget h4 {margin-top:5px;font-size:18px!important;font-family:'Helvetica'} .product-categories > li > a{font-size:16px;font-weight:bold!important;} #woocommerce_product_categories-2{margin:0!important;}

Other code is the adjustments for margins, border, sizes within widget elements. You may try to change them and see how they affect your site using browser developer tools. in Chrome or similar instruments in Opera, Firefox etc.
This part of code is the way to your font-file. Please check its name:
src: url(http://www.panda.no/wp-content/themes/legenda/css/fonts/HelveticaNeueLTStd-Bd.otf)

With best regards
Brian Johnson
#57227 Copied
panda

Participant

April 24, 2015 at 16:22

A million thanks!!!

Our site is almost there now 🙂

Anyway, I once asked how to alter the ‘CART’ word, and I was told to edit line 166 in the header.php file. Problem is, I dont know what to edit.

This is the line:
cart->get_cart_url() ); ?>” class=”shopping-cart-link” ><span><?php _e(‘Cart’, ETHEME_DOMAIN) ?></span><span class=”price-summ cart-totals”><?php echo $woocommerce->cart->get_cart_subtotal(); ?></span>

Btw it should say ‘BAG’, as it is an image of a bag and not a cart 😉

Also, when I add a text widget to the sidebar (LOGIN), the padding is all wrong and dont align with the rest. Tips would be very welcome.

You guys do a terrific job in support! Keep it up!

#59528 Copied Theme version: Legenda WooCommerce version: 4.1.1

Brian Johnson

Member

April 24, 2015 at 16:40

1. You should edit ‘Cart’ word.
2. Please clarify us with more details/screenshots about widget.

With best regards
Brian Johnson

#59531 Copied

panda

Participant

May 8, 2015 at 19:19

Ok, so I tried replacing the cart word(s) with bag in header.php file, but with no luck.

On the Cart page it refers to a ‘Shopping Bag’, when the Cart Widget refers to the ‘Cart’, as is default.

I dont mean to be Mr. Picky, but it is a minor thing to look at(!)

Ideally it would say ‘Shopping Bag’ in every mention of a ‘Cart’. Or if the images where a cart instead of a shopping bag. I guess that would work as well 🙂

Anyway, more important is the shop page and its sidebar –

I have set sidebar width to 1/6, but it seems to be 1/4. And I have disabled page heading, but it is still there. Please help.

Also, WooCommerce product categories and Pages have different styling, as the first has 5px padding/ margin between lines and the other 0px. Just a heads up!

I dont really know how to present my Q, but ideally the main sidebar should be the same on ALL pages. Currently, the exception is the ‘Shop’ page 🙁

If you log in to our site you can see for yourself.

Oh, and how do I edit the color of the ‘Contact us’ pop up box?

Please, contact administrator
for this information.

#62777 Copied Theme version: Legenda WooCommerce version: 4.1.1

Eva Kemp

Participant

May 11, 2015 at 10:01

Hello,

The credentials to wp-admin panel are incorrect.
Please check them.

Regards,
Eva Kemp.

#63052 Copied

panda

Participant

May 12, 2015 at 19:26

I am sorry. Blame the brain fart.

Please, contact administrator
for this information.

#63502 Copied

Eva Kemp

Participant

May 13, 2015 at 11:51

Hello,

To rename “Cart” title in the header you need edit the file wp-content/themes/legenda/framework/woo.php (line 884), find the code <h3 class="title"><span><?php _e('Cart', ETHEME_DOMAIN); ?></span></h3> and replace “Cart” word with your own.

Please update the theme and all required plugins to the latest versions. You can download them here:
https://www.8theme.com/download-plugins/
After that check Shop page.

https://www.youtube.com/watch?v=KdWESIIPU1k

Thank you.
Regards,
Eva Kemp.

#63601 Copied

panda

Participant

May 13, 2015 at 14:56

Theme is updated, plugins also.

Wordpress and WooCommerce is as well updated.

I replaced the ‘Cart’ word with ‘Shopping Bag’, but it didnt work.

Sidebar on ‘Shop’ page is still different looking.

I am sorry, I didnt know this was going to be so difficult.

Appreciate your time.

#63682 Copied

Eva Kemp

Participant

May 13, 2015 at 15:15

Hello,

Please provide us with FTP credentials.

Thank you.
Regards,
Eva Kemp.

#63686 Copied

panda

Participant

May 13, 2015 at 15:55

Below is access to our File Manager

and for Filezilla.

Please, contact administrator
for this information.

#63702 Copied

Eva Kemp

Participant

May 13, 2015 at 18:04

Hello,

The issue may be caused by Woocommerce template that is used for Shop page. You can try to remove Shop page in Woocommerce > Settings > Display > Products page > remove Shop page.
Then add Products element in Visual Composer editor in Pages > Shop to display products.

Thank you.
Regards,
Eva Kemp.

#63760 Copied

panda

Participant

May 21, 2015 at 17:21

I think I found out what was causing the ‘shop’ page sidebar to act differently.

I just changed the shortlink to ‘/shop1/’ instead of ‘/shop/’. Maybe WooCommerce default settings are interfering with something in the stylesheet. I have no idea, but anyway, now it is ok.

Also, in the woo.php file I edited line 931 or something, that did the trick!

Everything looks nice now, I think our site is ready to launch 🙂

Except this one little issue:

– How do I style the buttons?

Would like them to say ‘bag’ instead of ‘cart’ as well. And maybe do some color changes.

– And how do I edit the sum color in the cart widget?

Thanks again for all the help. You have been awesome!

#65327 Copied
Eva Kemp

Participant

May 21, 2015 at 18:28
Hello,

To change “Add to Cart” text you need edit Woocommerce files wp-content/plugins/woocommerce/includes/class-wc-product-simple.php (line 50), wp-content/plugins/woocommerce/includes/class-wc-product-variation.php (line 198).
To change text color and background color of “Add to Cart” button use this code in custom.css file:

a.button.etheme_add_to_cart_button { color: #000; background-color: green; }

Write your color values.

Use this code to change sum color in the top cart widget:

.shopping-cart-widget .cart-summ .price-summ { color: #06A24F !important; }

Regards,
Eva Kemp.
#65350 Copied
panda

Participant

May 22, 2015 at 16:04

Thank you!

So, now the buttons on the products page is styled. And sidebar is looking good on all pages, except one:

When I go to the single product page, sidebar is looking like it was before(!) 🙁

And the ‘add to cart’ button is unaltered on this page. Is there a code to style all buttons?

Also, the ‘add to wishlist’ link should be removed. How?

Your continuing support is priceless to us, thanks.

#65591 Copied

panda

Participant

May 22, 2015 at 16:15

Oh, and the ‘add to cart’ buttons & price on products page is aligned to the left under product image it seems. Can we center or align buttons & price to the right??

#65595 Copied
Eva Kemp

Participant

May 25, 2015 at 11:09
Hello,

If you don’t want to use Wishlist you can disable Wishlist plugin in wp-admin > Plugins.
To center the price and button add this code in custom.css file:

.products-grid .product .add-to-container { text-align: center; }

Concerning the sidebar on a single product page I’ve added this code in custom.css file:

.span3.sidebar.sidebar-left.single-product-sidebar { width: 14.5299% !important; } .sidebar-widget ul, #pages-2 ul {padding:0;text-transform:uppercase;font-size:13px;line-height:25px;font-weight:bold!important;}

Please check now.

Regards,
Eva Kemp.

Regards,
Eva Kemp.
#65784 Copied
panda

Participant

May 25, 2015 at 15:43

You rock!

I may have some very minor things I want you to look at later.

But for now, I just want to thank you for your unparalleled support.

Cheers

#65894 Copied
1 2 →

Viewing 30 results - 1 through 30 (of 31 total)