I'm making a custom dashboard for WC and need to add content just between the nav and ul elements in WooCommerce's menu in dashboard in the easiest way.
I've seen there's a hook called woocommerce_before_account_navigation and woocommerce_after_account_navigation but those hooks add content after or before the entire nav element.
Here is a picture of what I'm trying to do.
Someone got a solution?
Since WooCommerce doesn't provide hooks to inject code exactly where you need it:
#1 Customize the navigation section from your theme
Since WooCommerce allows you to override most of its template files, you could:
Copy the navigation.php file located at /wp-content/plugins/woocommerce/templates/myaccount/.
Paste this file into /wp-content/themes/your-theme/woocommerce/myaccount/.
Make your desired changes.
Profit!
Keep in mind that you'll want to keep an eye on WC's updates from time to time because there might be changes in the files you're overriding that you might want/need to port over.
Or...
#2 Inject your custom code right where you want it using AJAX & JS
Use WordPress' AJAX API to generate the HTML output you need and inject it right between the nav and the ul tags using jQuery/vanilla JavaScript.
This way you avoid having to override WC's templates. Keep in mind though that if you do this while using a caching plugin on your site you'll need to configure it so it rebuilds its cache every ~24 hours or less or else things might break for some users (example).
Well....the easiest but not the best way is to:
Manually put a an empty div tag so that your code becomes something like:
<nav class= 'woocommerce-MyAccount-navigation'>
<div style ='blah-blah'>//that div after the nav bar ;TLDR
<div id='newDiv></div>
<ul>//etc
Wrap up the code to display user infos, avatar and name in a php function (I named mine
getUsernameAndStuff()) letting id be the id of the user.
Like :
<?php
function getUsernameAndStuff(id){
//put the code here..
}
?>
Then using js:
<script>document.getElementById().innerHTML=<?php getUsernameAndStuff(id)?></script>
Related
So basically I've been working on my graduation project and I'm working on a website, of course the website has a navigation menu on each page of the website, the thing is that when ever I need to change something in the navigation menu it becomes a hassle going through each page to change something up.. my question is, is there a method like placing this nav menu in a function and displaying it? and if i do place it in a function how do i change the class to active with in each page?
The best option would be to split it in templates (I would recommend using twig, but you can also roll your own). That way you would only have "navigation" on one file, which is the used by all others.
As for "which part is active", that would be done by passing a parameter in the template. The template should use that variable to determine, which menu item to show as "active".
How can I use a self-made Wordpress plugin to output for example a custom menu or custom HTML to a specific location? The only places I managed to output content is in wp_head and wp_footer, but is it possible to get content to show up anywhere else? Is it even possible to force the plugin to output the HTML for example inside a specific div or a DOM element?
Example scenarios
I want to add a custom button that triggers a menu or modal, but the button needs to be located inside the header and I also need a place for the modal HTML before the footer (example).
I want to add custom made "social share buttons" to every page and need a place to output the HTML after the page title.
Just to give you a feeling of what I'm trying to do...
Maybe I'm just way off track. I am new to this, but I am eager to learn.
"Teach me the ways of the force"
Appreciate any help, Thanks :)
I need to remove vertical scrollbars from a specific webpage only in my site
http://historyofliverpool.com/test-2/
The page is made up from many php and css files, to I do not know where to begin editing, and do not want to alter the rest of the site.
Would a custom field on this page only solve my problem?
Any help much appreciated.
I can't find any overflow: hidden in your stylesheet.
Please try this:
.fullscreen {
overflow: hidden;
}
Removing the scroll bar is easy; you would simply need to apply overflow:hidden to the body selector.
The real challenge is removing the scroll bar on the correct page. There are quick and dirty ways of doing this, but lets take our time and look at this sensibly:
Child Themes
It looks like you're using the Anglepane theme. As this is a commercial theme I'd recommend you first create a child theme before making any changes. This way when the Anglepane theme is updated it doesn't remove your edits.
Identifying the page - body_class()
The next step is identifying and selecting the page you want your changes to apply to. WordPress has the convenient body_class() function that adds CSS classes to the body element, allowing you to easily add styles on a page by page basis. Now it looks like your theme isn't using this function; so you should add this function by:
Copy the header.php file from the parent theme folder to your child theme folder so you can edit it
Find the body tag and alter it like so:
<body <?php body_class( $class ); ?>>
Identifying the page - ID vs template
Once you've added the body_class() function you should find that your body element will have a bunch of classes that you can use; one of these will be the page ID, prefixed with .page-id-. You can now use that class name for your CSS. For example, if your target page had an ID of 3 you could use:
.page-id-3 {
overflow:hidden;
}
While this works, I personally like to use page templates instead for targeting page-specific styles. One of the benefits to this is that it avoids mismatched page IDs between different environments. For example, I might want to change the background colour of my about page, which has an id of 4:
.page-id-4 {
background:red; // Works as long as the page ID is definitely 4
}
That works great on my local copy of the site, but on the live site my about page has an id of 24. I avoid this by creating a page template specifically for my about page. This way I can use the page-template selector instead, which is consistent across both environments:
.page-template-about {
background:red; // Now I work everywhere
}
Hopefully that convers everything in sufficiently detail for you.
So I know this is a bit out of ordinary for me to ask a question like this, but for some reason I am just really having an issue grasping this.
My Problem:
I have a responsive layout theme for word press, its clean its pretty. When implementing Google ad-sense into a text/html widget on the right bar it over runs the widget size and over hangs on the right hand side.
My Question:
What will be the best method for getting my ad to look more uniform. Is there a way to select a single widget css? Is there a way to put a div inside that widget and select the parent css from that div? Should I go in and hard code it into the theme?
Additional:
The theme I am using has a built in child theme option which I have chosen to use. When I place the code into the child themes function.php it breaks the theme and displays what I enter as plain text to the screen. Adding opening and close php tags did not seem to fix this issue.
Well it appears once again I asked a question before fully digging my brain into this. Hopefully this will become something useful for someone else.
FIX:
It appears that wordpress assigns a unique ID to every widget that is created.
Created New Text Widget
Wordpress Assigns: text-1
I can now go into css and manipulate this widget directly.
#text-1 {
//do somthing
}
It's always best to avoid hardcoding WP themes as when they get updated your modifications might vanish.
Glad to see you figured it out, I was going to say that you CAN add a div inside a widget and give it a name, which might still be be better than use the WP assigned layer name, as that might change if you were to delete or re-add the widget.
I'm trying to add additional content (such as a banner image, an additional loop) to the WooCommerce plugin, but I'm having trouble trying to output such said content.
I'm trying to make WooCommerce output <div>s with <img> tags in the wrapper-end.php template area after the <div>s, but nothing comes up.
I've also tried placing the extra content after <?php woocommerce_content(); ?> in woocommerce.php, but it duplicates itself for every single page afterwards.
I'm confused. Is it possible? Am I doing something wrong?
I'm trying to do something like this.
Can someone share their experience?
if you don't use the catch-all woocommerce_content() function, but the hooks instead, you can customize every page individually by just copying all the files from woocommerce/template to yourtheme/woocommerce. See woocommerce docs for more info.
The templates will also show you the other hooks & filters that you can use to place your content.